垂直居中的方法

图片居中：

 

 1<style>
 2.box {}{
 3/**//*非IE的主流浏览器识别的垂直居中的方法*/
 4display: table-cell;
 5vertical-align:middle;
 6
 7/**//*设置水平居中*/
 8text-align:center;
 9
/**//* 针对IE的Hack */
*display: block;
*font-size: 175px;/**//*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/**//*防止非utf-8引起的hack失效问题，如gbk编码*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {}{
/**//*设置图片垂直居中*/
vertical-align:middle;
}
</style>


<h3>图片垂直居中的使用技巧</h3>
<br>

<div class="box">
<img src="xxx.gif" />
</div>

 

文字居中：

 

 1<style type="text/css">
 2* {}{margin:0; padding:0; border:0;}
 3#bg {}{margin:100px auto; width:500px; background:#FFCC00; line-height:200px; border:#FFCCFF 1px solid; text-align:center; vertical-align:middle; vertical-align:middle;}
 4</style>
 5
 6<div id="bg">
 7<a href="#">111111111111</a>
 8<a href="#">222222222222</a>
 9<a href="#">333333333333</a>
</div>