div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

Div垂直居中是我们在页面布局和设计中经常会遇到的问题，特别是在排版参差不齐的情况下，垂直居中能够使网页更加美观。本文将会分享几种实现DIV垂直居中的方法，针对不同的场景进行讲解。

一、单行文字（未知高度）

对于单行文字的垂直居中，最常见的一种方式是使用textAlign和lineHeight属性。具体实现代码如下：

<div class="vertical-center">
  <p>这是一行文字</p>
</div>

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 高度自定义 */
}

.vertical-center p {
  text-align: center;
  line-height: 300px; /* 与高度一致 */
}

上述代码中，我们使用Flex布局，使用justify-content和align-items属性来使其水平和垂直居中，然后通过p标签的textAlign和lineHeight属性实现单行文字的居中。

二、多行文字（未知/固定高度）

对于多行文字垂直居中，我们可以使用CSS的transform属性与Flex布局相结合的方式进行实现。比如，我们可以用以下方式：

<div class="vertical-center2">
  <p>这里有多行文字，这里有多行文字，这里有多行文字，这里有多行文字</p>
</div>

.vertical-center2 {
  height: 300px; /* 高度自定义 */
  display: flex;
  align-items: center;
}

.vertical-center2 p {
  margin: 0;
  padding: 0;
  display: inline-block;
  transform: translateY(-50%);
}

上述代码中，我们使用了 translateY() 负值来使p标签相对于父元素居中，p标签设为 display: inline-block; 的目的是为了防止块状元素换行，在 Flex 容器中使用的话会导致子元素因为换行或者空格而产生间隙，从而导致居中出现偏差。

对于多行文字的高度未知的情况，我们可以使用CSS3的transform和webkit-transform、Flex布局相结合的方式进行垂直居中。具体实现代码如下：

<div class="vertical-center3">
  <p>这里有多行文字，这里有多行文字，这里有多行文字，这里有多行文字</p>
</div>

.vertical-center3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px; /* 高度自定义 */
  position: relative;
}

.vertical-center3:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.vertical-center3 p {
  display: inline-block;
  vertical-align: middle;
  transform: translate(0, -50%);
  position: relative;
  top: 50%;
}

我们首先定义外部容器的样式为 Flex 布局、高度自定义。然后定义一个 :before 的伪元素，给其高度写成100%，使其不占据区域。然后再使其垂直对齐方式为垂直居中（vertical-align: middle;）。p 标签设为 display: inline-block; 和上述一样，防止块状元素换行，并将其垂直对齐方式同样设置为垂直居中（vertical-align: middle;），再使用 translate(-50%, -50%) 将其内容完全垂直居中。最后，使用 position: relative; top: 50%; 微调一下即可完美实现。