CSS 中的居中指南

有时，内联/文本元素可能看起来是垂直居中的，仅仅是因为它们的上方和下方有相等的填充。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果由于某种原因填充不是一种选择，并且您试图居中一些您知道不会换行的文本，则有一个技巧是使line-height等于高度，这将center文本。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

顶部和底部的相等填充也可以为多行文本提供居中效果，但如果这不起作用，也许包含文本的元素可以是表格单元格，无论是字面上的还是使用 CSS 使其表现得像一个表格单元格。vertical-align 属性处理这种情况，在这种情况下，与它通常处理一行上对齐的元素的对齐方式不同。（更多信息。）

如果表格式方法不可行，也许您可以使用flexbox？可以很容易地使单个flex-child在flex-parent中居中。

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

请记住，只有当父容器具有固定高度（px、% 等）时，这才是真正相关的，这就是为什么此处的容器具有高度的原因。

如果这两种技术都不可行，您可以采用“幽灵元素”技术，其中一个全高伪元素放置在容器内，并且文本与此伪元素垂直对齐。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

在网页布局中，不知道高度的情况相当常见，原因有很多：如果宽度发生变化，文本重排可能会改变高度。文本样式的变化可能会改变高度。文本数量的变化可能会改变高度。具有固定纵横比的元素（如图像）在调整大小时可能会改变高度。等等。

但是，如果您知道高度，则可以像这样垂直居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

仍然可以通过在向下移动一半高度后将其向上移动一半高度来居中它

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果您不关心，您只需要将内容垂直居中，使用表格或 CSS 显示将元素变成表格可以解决问题。

毫不奇怪，这在flexbox中容易得多。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

您还可以使用子元素上的margin: auto;在flexbox中实现居中。