标签：com http style class div img c t size sp tar
.box1 a{
writing-mode:tb-rl; /* 触发layout
后面高度生效，文档流 自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */
height:100%;
vertical-align:middle
}
.box2 i{
zoom:1; height:100%; width:0; /*
触发layout，撑起行内的高度，宽度为0，不占横向空间 */
background:#c00;
vertical-align:middle;
}
.box3{
*display: block;
*font-size: 87px;/约为高度的0.873，200*0.873
约为87/
*font-family:Arial;/防止gbk等编码引起的hack失效问题/
}
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> | |
| <title>页面元素垂直居中的几种方法</title> | |
| <link href="http://zzsvn.pcauto.com.cn/svn/%d6%c6%d7%f7%b2%bf%b9%e6%b7%b6/web%b1%ea%d7%bc/styles/reset.css" rel="stylesheet" /> | |
| <style> | |
| .box{ width:100px; height:100px; line-height:22px; border:1px solid #c00;} | |
| .box1{ display:table-cell; vertical-align:middle; text-align:center;} | |
| .box1 a{ | |
| writing-mode:tb-rl; /* 触发layout 后面高度生效，文档流 自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */ | |
| height:100%; | |
| vertical-align:middle | |
| } | |
| .box2{ display:table-cell; vertical-align:middle; text-align:center;} | |
| .box2 i{ | |
| zoom:1; height:100%; width:0; /* 触发layout，撑起行内的高度，宽度为0，不占横向空间 */ | |
| background:#c00; | |
| vertical-align:middle; | |
| } | |
| .box2 img{ vertical-align:middle} | |
| .box3{ display:table-cell; vertical-align:middle; text-align:center;} | |
| .box3{ | |
| *display: block; | |
| *font-size: 87px;/*约为高度的0.873，200*0.873 约为87*/ | |
| *font-family:Arial;/*防止gbk等编码引起的hack失效问题*/ | |
| } | |
| .box4{ display:table-cell; vertical-align:middle; text-align:center;} | |
| </style> | |
| <!--[if lte IE 7]> | |
| <style> | |
| .box4{ position:relative; } | |
| .box4 a{ position:absolute; display:block; left:50%; top:50%;} | |
| .box4 img{position:relative;left:-50%;top:-50%;} | |
| </style> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <br /> | |
| 方法一 | |
| <div class="box box1"> | |
| <a href="#"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a> | |
| </div> | |
| <br /> | |
| 方法二 | |
| <div class="box box2"> | |
| <i></i> | |
| <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a> | |
| </div> | |
| <br /> | |
| 方法三 | |
| <div class="box box3"> | |
| <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a> | |
| </div> | |
| <br /> | |
| 方法四 | |
| <div class="box box4"> | |
| <a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a> | |
| </div> | |
| </body> | |
| </html> | |
备忘：CSS图片垂直居中全兼容淫技整理集合,码迷,mamicode.com
标签：com http style class div img c t size sp tar
原文地址：http://www.cnblogs.com/aim-at-is-the-tao-in/p/3701726.html
