垂直居中

转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=61

html

1 2 3

<div id="parent"> <div id="child">Content here</div> </div>

css

方法1：

1 2 3 4 5

#parent {display: table;} #child { display:table-cell; 1em; height:1em; font-size:144px; 144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*这里的大小是根据高宽上限128像素图片设置的*/ vertical-align: middle; }

方法2：

a标签：

a{display:inline-block; 1.2em; font-size:128px; text-align:center; vertical-align:middle;}

img标签：

img{vertical-align:middle;}

方法3：

css代码：

.zxx_ul_image{overflow:hidden; zoom:1;} 
.zxx_ul_image li{float:left; 150px; height:150px; text-align:center; line-height:150px; *font-size:125px;} 
.zxx_ul_image li:after{content:' '; vertical-align:middle;} 
.zxx_ul_image li img{vertical-align:middle;}

相应HTML代码：

<ul class="zxx_ul_image">

　　<li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

　　</li>

　　<li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />

　　</li>

　　 <li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />

　　</li>

　　<li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" />

　　</li>

　　<li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />

　　</li>

　　<li>

　　　　<img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" />

　　</li>

</ul>

方法4：(此方法在iE8及以下无效)

#parent { position:relative;}
#child {
　　position:absoulte; left:50%; top:50%; transform: translate(-50%,-50%);
}