DIV+CSS实现文字垂直居中方法大全
之前我们分享过纯CSS实现任意图片在div中垂直居中的方法，今天我们则来讲一讲DIV+CSS实现文字垂直居中的若干种方法。
大家都知道文字水平居中使用text-align:center即可，也有人知道垂直居中vertical-align:middle的写法，不过这种垂直居中写法只对(X)HTML元素中拥有valign属性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这些元素则没有valign属性。下面我们将逐一讲解各种情况下文字垂直居中的实现方法：
一、单行文字垂直居中
如果一个容器中只有一行文字，实现垂直居中就相对比较简单，我们只需要将容器实际高度height和容器行高line-height设置相等即可。请看实例代码：
<!DOCTYPE html>
<html>
<head>
<title>单行文字垂直居中-益吾库代码实例</title>
<meta charset="UTF-8">
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在看到的这行文字在DIV中垂直居中显示</div>
</body>
</html>使用overflow:hidden是为了防止文字超出容器或者自动换行，这样就达不到垂直居中效果。
二、多行未知高度文字垂直居中
如果一段多行文字内容，它的容器高度未被限定，我们就能使用上下padding值相同的方法实现垂直居中。不过这仅仅是一种“看起来”垂直居中的方式，它的原理就是使用上下相等的填充值“挤压”文字实现。实例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>未限定高度多行文字垂直居中-益吾库代码实例</title>
<meta charset="utf-8">
<style type="text/css">
body { font-size:12px;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:800px;
}
</style>
</head>
<body>
<div>
<pre>
这是一段包含代码的多行文字垂直居中显示示例
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre>
</div>
</body>
</html>这种方法的优点就在于它支持几乎所有浏览器，并且代码很简单，只不过前提条件就是文字容器的高度必须未被限定。
三、多行固定高度文字垂直居中
本文开始我们就说过CSS中的vertical-align属性只对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来将<div>模拟成<table>就可以使用vertical-align。需要注意的是，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：
<!DOCTYPE html>
<html>
<head>
<title>多行限定高度文字垂直居中-益吾库代码实例</title>
<meta charset="utf-8">
<style type="text/css">
body { font-size:12px;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<pre>
现在我们要使这段限定高度的文字垂直居中显示！
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div></div>
</body>
</html>这个方法看起来已经很理想了，也适用于未限定高度的文本内容，但老旧的Internet Explorer 6浏览器并不支持display:table和display:table-cell，因此如果需要考虑IE6及以下版本的浏览器，我们还需要下面将提到的其它办法。
四、低版本Internet Explorer浏览器文字垂直居中解决方案
因为低版本IE浏览器高度计算上存在缺陷，所以在Internet Explorer 6中对父元素进行定位后，再对子元素进行百分比计算时，计算的基础似乎是有继承性的（仅针对百分比计算，子元素的高度是从父元素继承来的定位高度）。基于此原理写出实例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>多行文字垂直居中（兼容低版本IE浏览器）-益吾库代码实例</title>
<meta charset="utf-8">
<style type="text/css">
body { font-size:12px;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
<pre>
现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div></div></div>
</body>
</html>以上代码具体思路是：如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。当然，这段代码只能在Internet Exlporer 6等计算存在Bug的浏览器中起作用。
五、文字垂直居中综合解决方案
若需要考虑兼容包括低版本IE浏览器在内的浏览器，我们可以使用CSS hack的方式综合以上代码。整合后的实例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>多行文字垂直居中（兼容）-益吾库代码实例</title>
<meta charset="utf-8">
<style type="text/css">
body { font-size:12px;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content">
<pre>
现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div></div></div>
</body>
</html>六、利用display:flex布局方式实现
<!DOCTYPE html>
<html>
<head>
<title>多行文字垂直居中（display:flex方式）-益吾库代码实例</title>
<meta charset="utf-8">
<style type="text/css">
#outer{
background-color: #13CDF4;
width: 300px;
height: 200px;
display: flex;
justify-content: center;/*实现水平居中*/
align-items:center; /*实现垂直居中*/
}
#middle{
background-color: #E41627;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
利用display: flex实现子div大小不固定垂直居中
</div>
</div>
</body>
</html>display:flex布局方式的唯一缺点就是它属于CSS3属性，IE9及以下版本浏览器都不支持。
