DIV+CSS实现文字垂直居中方法大全

2017年11月21日 10:22:48益点益滴4445

之前我们分享过纯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及以下版本浏览器都不支持。