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

2017-11-21CSS1350
  • 详情内容
  • 留言点评

之前我们分享过纯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>

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看