使用Css实现水平垂直居中
<div style="text-align:center;width:200px;height:200px;border:1px solid black;"> 水平居中示例。 </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="http://www.google.cn/images/nav_logo3.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，这个问题则有些复杂。
如果只考虑某一个浏览器，也不会复杂到哪里去，但若考虑兼容所有浏览器，需要下一定的功夫。
由于Html元素我们可以分为三种：非可替换元素(如span、label等)、可替换元素(img)、块元素(div)。
我们可以把这个问题分成简单的三个问题。
- div中只有文字，高度宽度未知。
- div中只有图片，高度宽度未知。(但图片大小小于div。)
- 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="http://www.google.cn/images/nav_logo3.png" style="vertical-align:middle;"/> </div>
一般情况下，这个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的距离。
可以这么考虑一下，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实现的垂直居中。
下一篇: FreeCMS (开源CMS)
