从垂直居中说开去

Pro CSS Techniques 读了多一半了,笔记明天继续,今天先说说关于网页内容(文字、图片、容器等)垂直居中的问题。挑起这个话题还是因为去年淘宝 UED 招聘时的一道笔试题,那篇博 去年就看过了,但最近被挖出来再看又是另一种感受——能感觉到自己还是小有提高的:) 顺手把垂直居中的方法总结下:

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

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

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

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

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

Css代码
  1. #box2 { padding: 10px 0 }  
#box2 { padding: 10px 0 }

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

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

Html代码
  1. <div id="box3_wrapper">  
  2.    <div id="box3">  
  3.          作者:shimano<br />  
  4.          如何既给用户提供最大限度的编辑权限<br />  
  5.          又能保证网页整体的规范和美观?<br />  
  6.          真 TMD 难啊!  
  7.    <div>  
  8. </div>  
<div id="box3_wrapper"> <div id="box3"> 作者:shimano<br /> 如何既给用户提供最大限度的编辑权限<br /> 又能保证网页整体的规范和美观?<br /> 真 TMD 难啊! <div> </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. }  
#box3_wrapper { position: relative; } #box3_inner { position: absolute; top: 50% } #box3 { position: relative; top: -50%; background: #eee }


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>  
<div id="box3_wrapper"> <div id="box3_inner"> <div id="box3"> 这种方法<br /> 在下面的未知高度 div 垂直居中<br /> 也用到了 </div> </div> </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. }  
#box4_wrapper { height: 100%; width: 100%; overflow: hidden; position: relative } #box4_wrapper[id] { display: table; position: static } #box4_outer { position: absolute; top: 50% } #box4_outer[id] { display: table-cell; vertical-align: middle; position: static } #box4_inner { position: relative; top: -50%; margin: 0 auto; background: #eee }

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>  
<div id="box4_wrapper"> <div id="box4_outer"> <div id="box4_inner"> 这是一种无 hack 的方式<br /> 虽然环保,但是臃肿:( </div> </div> </div>

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

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

Css代码
  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. }  
#box5 { display: table-cell; *display: block; *font-size: 175px; *font-family: Arial; vertical-align: middle; height: 200px; width: 200px } #box5 img { vertical-align: middle }

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 浏览器时利用单行文字的垂直居中方法也可以。

你可能感兴趣的:(垂直居中)