应用Css实现水平垂直居中

使用Css实现水平垂直居中
问题：假设有一个div，高宽都为200px，如何使得div内的内容水平居中？
很简单，设置该div的style.textAlign为center。

<div style="text-align:center;width:200px;height:200px;border:1px solid black;"> 水平居中示例。</div>

水平居中示例。 问题：假设有一个div，高宽都为200px，如何使得div内的内容垂直居中？

使用table的话，解决这个问题相当简单。

<table width="200" height="200" style="border:1px solid black;"> <tr>  <td valign="middle">哈哈哈</td> </tr></table>

使用Table垂直居中

<table width="200" height="200" style="border:1px solid black;"> <tr>  <td valign="middle"><img src="//img.reader8.net/uploadfile/jiaocheng/2014/0125/201401251856139027.png"/></td> </tr></table>

<table width="200" height="200" style="border:1px solid black;"> <tr>  <td valign="middle">   <div>   使用Table垂直居中<br />   使用Table垂直居中<br />   使用Table垂直居中<br />   </div>  </td> </tr></table>

使用Table垂直居中
使用Table垂直居中
使用Table垂直居中

若不使用table，这个问题则有些复杂。
如果只考虑某一个浏览器，也不会复杂到哪里去，但若考虑兼容所有浏览器，需要下一定的功夫。
由于Html元素我们可以分为三种：非可替换元素(如span、label等)、可替换元素(img)、块元素(div)。
我们可以把这个问题分成简单的三个问题。

div中只有文字，高度宽度未知。 div中只有图片，高度宽度未知。(但图片大小小于div。) div中还有一个div，高度宽度已知。

第一个问题，可以使用line-height等于该div的高度来解决，这样会限制该div内只能有一行文字。

<div style="width:200px;height:200px;border:1px solid black;line-height:200px;"> 文字的垂直居中。</div>

文字的垂直居中。 对于多行文字的div，纯css实现目前比较无奈，IE应该是没有办法做到。
不过IE提供了expression，可以在这里面写一些js脚本，再加上position的relative和absolute，可以搞定多行文字的垂直居中。
display的table和table-cell，FF是支持的。可以实现多行文字的垂直居中。
下面代码中的_position、_left、_top的写法是专门针对IE的。

<div style="width: 300; height: 200;border:1px solid #C0C0C0;_position:relative;display:table;"><div style="text-align:center;display:table-cell;_position: absolute;_top:expression((this.parentNode.offsetHeight-this.offsetHeight)/2);_left:expression((this.parentNode.offsetWidth-this.offsetWidth)/2);vertical-align:middle;">多行文字<br />垂直居中</div></div>

多行文字
垂直居中
第二个问题，针对非IE浏览器，我们可以使用WEB标准里面的display:table-cell;vertical-align;middle;来解决。
针对IE浏览器，则可以使用font-size的hack来解决。

<div style="width:200px;height:200px;border:1px solid black;line-height:200px;display: table-cell;vertical-align:middle;*display: block;*font-size:175px;*font-family:Arial;"> <img src="//img.reader8.net/uploadfile/jiaocheng/2014/0125/201401251856139027.png" style="vertical-align:middle;"/></div>

注意这里font-size的大小不是200px，这是因为IE对字体大小的算法与html元素的算法不同。
一般情况下，这个font-size约为高度的0.873，本例为200*0.873 约为175。
*font-family:Arial;是防止非utf-8引起的hack失效问题，如gbk编码。

第三个问题，若html文件添加了doctype，则可以使用margin:auto;来解决。
但是我们考虑的是一般情况下，这个问题该如何解决。则此方案被否决。
若是该div的宽度和高度都是未知的，我目前也想纯CSS的方法来解决这个问题，而且这种场景，个人认为相对较少。
这种情况下，我们可以使用negative margin来解决这个问题，也就是说使用负值的Margin来解决这个问题。

negative margin的概念一开始比较难理解。
可以这么考虑一下，margin-top:20px;使得div的显示往下移动20px的距离。
而margin-top:-20px;则会使得div的显示往上移动20px的距离。
看到这里可能还没明白negative margin对我们来说有什么意义。
对，仅仅使用negative margin对我们来说就是没有任何作用。
若配合使用left:50%;top:50%;，则你就可以理解negative margin的意义了。
没错。只要我们margin-top、margin-bottom分别设置为内部该div的高度的一半的负值，div可以达到垂直居中的效果。
margin-left、margin-right分别设置为内部该div的高度的一半的负值。div可以达到水平居中的效果。
需要注意的是：下面代码中left和top使用了50%，position:relative;是必须的。

<div style="width:200px;height:200px;border:1px solid black;"> <div style="left:50%;top:50%;width:100px;height:100px;margin:-50px -50px;border:1px solid blue;position:relative;">  negative margin实现的垂直居中。 </div></div>

negative margin实现的垂直居中。
文章参考列表：

由浅入深漫谈margin属性 Vertical Centering in CSS Vertical centering using CSS

 
页面高手!
期待博主更多的关于CSS方面的知识的介绍。 CSS掌握的很牛经 8 楼 redfeather 2009-01-13   学习一下！

查看更多 下一篇