使用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="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垂直居中
  使用Table垂直居中
  
  
  若不使用table，这个问题则有些复杂。
  如果只考虑某一个浏览器，也不会复杂到哪里去，但若考虑兼容所有浏览器，需要下一定的功夫。
  由于Html元素我们可以分为三种：非可替换元素(如span、label等)、可替换元素(img)、块元素(div)。
  我们可以把这个问题分成简单的三个问题。
  1. div中只有文字，高度宽度未知。
  2. div中只有图片，高度宽度未知。(但图片大小小于div。)
  3. 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="http://www.google.cn/images/nav_logo3.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实现的垂直居中。
  
  文章参考列表：
  1. 由浅入深漫谈margin属性
  2. Vertical Centering in CSS
  3. Vertical centering using CSS

评论

8 楼 redfeather 2009-01-13  

学习一下！

7 楼 sutrong 2008-12-13  

CSS掌握的很牛经

6 楼 dearshor 2008-12-12  

受教了
期待博主更多的关于CSS方面的知识的介绍。

5 楼 linginfanta 2008-12-12  

强人，学习了。

4 楼 diddyrock 2008-12-12  

高手!
楼下保持队形

3 楼 daoyongyu 2008-12-11  

高手！

2 楼 xieye 2008-12-11  

高手！！
＝＝＝＝＝＝＝＝＝

1 楼 whaosoft 2008-12-11  

 
页面高手!