Div元素中实现文本垂直居中的多种技巧

前言

在前端开发的过程中经常会遇到需要对div中的文字进行垂直居中，下面总结了几种实现的方式。

1. 单行文字div中垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

<div>
  看你是不是垂直居中的
</div>

div {
  height: 200px;
  line-height: 200px;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  text-align: center
}

查看Demo

---

2. 多行文本固定高度的居中

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的"td"、"th"、"caption"等，而像"div"、"span"这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

但是在CSS中还有一个display属性能够模拟"table"，所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个"div"元素。

<div id="wrap">
  <div id="content">
    我是第一行 <br/>
    我是第二行 <br/>
    我是第三行 <br/>
    我是第四行 <br/>
  </div>
</div>

#wrap {
  height: 400px;
  display: table;
}

#content {
  vertical-align: middle;
  display: table-cell;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 760px;
}

查看Demo

---

2. 多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把完全填充的一种方式而已。
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

<div>
  我是第一行<br />
    我是第二行 <br />
    我是第三行 <br />
    我是第四行<br />
</div>

div {
  padding: 25px;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 500px;
}

查看Demo

---

4. 多行文本固定高度的居中

<div id="wrap">
  <div id="subwrap">
    <div id="content">
        现在我们要使这段文字垂直居中显示！<br />
                现在我们要使这段文字垂直居中显示！ 
    </div>
  </div>
</div>

div#wrap {
  display: table;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 500px;
  height: 400px;
  _position: relative;
  overflow: hidden;
}

div#subwrap {
  vertical-align: middle;
  display: table-cell;
  _position: absolute;
  _top: 50%;
}

div#content {
  _position: relative;
  _top: -50%;
}

查看Demo