垂直居中

（转载自http://www.ctba.cn/blog/entry/2251）


1. 单行文字在固定高度容器中垂直居中

这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；



   1. #box { height: 120px; line-height: 120px; overflow: hidden } 





2. 多行文字在未知高度容器中垂直居中

这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；



   1. #box2 { padding: 10px 0 } 





3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）



   1. #box3_wrapper { 
   2.    display: table; 
   3.    height: 311px; 
   4.    background: #eee 
   5. } 
   6. #box3 { 
   7.    display: table-cell; 
   8.    vertical-align: middle 
   9. } 



Html代码 复制代码

   1. <div id="box3_wrapper"> 
   2.    <div id="box3"> 
   3.         作者：shimano<br /> 
   4.         如何既给用户提供最大限度的编辑权限<br /> 
   5.         又能保证网页整体的规范和美观？<br /> 
   6.         真 TMD 难啊！ 
   7.    <div> 
   8. </div> 





注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。

如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）；这可以理解为默认 line-height，在 这篇日志 中我也是遇到了同样的问题。

关于 IE6 下 line-height 的问题我在 这篇日志 中有提。

4. 多行文字在固定高度容器中垂直居中（IE 浏览器）

因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法：


Css代码

   1. #box3_wrapper { 
   2.    position: relative; 
   3. } 
   4. #box3_inner { 
   5.    position: absolute; 
   6.    top: 50% 
   7. } 
   8. #box3 { 
   9.    position: relative; 
  10.    top: -50%; 
  11.    background: #eee 
  12. } 






Html代码

   1. <div id="box3_wrapper"> 
   2.    <div id="box3_inner"> 
   3.       <div id="box3"> 
   4.          这种方法<br /> 
   5.          在下面的未知高度 div 垂直居中<br /> 
   6.          也用到了 
   7.       </div> 
   8.    </div> 
   9. </div> 



下面有个权衡 IE 与 非 IE 浏览器浏览效果的实现方法，请继续看

5. 未知高度 div 的垂直居中

Css代码 复制代码

   1. #box4_wrapper { 
   2.    height: 100%; 
   3.    width: 100%; 
   4.    overflow: hidden; 
   5.    position: relative 
   6. } 
   7. #box4_wrapper[id] { 
   8.    display: table; 
   9.    position: static 
  10. } 
  11. #box4_outer { 
  12.    position: absolute; 
  13.    top: 50% 
  14. } 
  15. #box4_outer[id] { 
  16.    display: table-cell; 
  17.    vertical-align: middle; 
  18.    position: static 
  19. } 
  20. #box4_inner { 
  21.    position: relative; 
  22.    top: -50%; 
  23.    margin: 0 auto; 
  24.    background: #eee 
  25. } 




Html代码

   1. <div id="box4_wrapper"> 
   2.    <div id="box4_outer"> 
   3.       <div id="box4_inner"> 
   4.          这是一种无 hack 的方式<br /> 
   5.          虽然环保，但是臃肿:( 
   6.       </div> 
   7.    </div> 
   8. </div> 




CSS2 选择符 #value[id] 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:)

6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中


   1. #box5 { 
   2.    display: table-cell; 
   3.    *display: block; 
   4.    *font-size: 175px; 
   5.    *font-family: Arial; 
   6.    vertical-align: middle; 
   7.    height: 200px; 
   8.    width: 200px 
   9. } 
  10. #box5 img { 
  11.    vertical-align: middle 
  12. } 





Html代码 复制代码

   1. <div id="box5"> 
   2.    <img src="img/ctba.png" alt="扯谈社" /> 
   3. </div> 

<div id="box5">
   <img src="img/ctba.png" alt="扯谈社" />
</div>



淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack：在 IE 下，将字号设置为容器高度的 0.873（本例中即 200*0.873 = 175）图片便会垂直居中；字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题，如 gbk 编码（摘自译飞的博客）

当然如果只是图片，在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。