css垂直居中写法整理

①font-size法

设置display:table-cell

<div class="box">
    <div><a><img src="25.jpg"></a></div>
</div>

<style>
.box{ display:table-cell;text-align:center;vertical-align:middle;
/*ie67垂直居中*/*font-family:simsun;*font-size:200px;}
.box img{}
</style>

②绝对定位法


<div class="box">
    <p><br>
        <img src="25.jpg" />
    </p>
</div>

<style>
.box{ display:table-cell;vertical-align:middle; *position:relative;}
.box p{*position:absolute;*top:50%;width: 100%;text-align: center;}
.box img{*position:relative;*top:-50%;}    
</style>

③固定高度的多行文本居中

<div class="box">
    <span>
        多行文本固定高中垂直居中<br>
        固定高度的多行文本居中
    </span>
</div>

<style>
.box{line-height: 300px;border: 1px dashed #cccccc;font-size: 0;height: 300px;text-align: center;}
.box span{display: inline-block;line-height: 24px;vertical-align: middle;font-size: 15px;}
</style>

多行文本固定高中垂直居中
固定高度的多行文本居中

⑤兼容ie6的图片垂直居中

<div class="box">  
    <img src="25.jpg">  
    <!--下面span标签用于兼容ie6，使用inline-block使其layout起作用-->  
    <span></span>  
</div>

<style>
.box{border:1px red solid; text-align:center; line-height:300px;} 
/*因为除了ie6，使用text-align和line-height可以使图片水平垂直居中，所以下面两句用于兼容ie6*/ 
.box img{vertical-align:middle;} 
.box span{display:inline-block;}
</style>

⑥万能的table实现垂直居中

<div class="box">
        <table width="100%" height="100%">
            <tbody><tr>
               <td align="center" valign="middle">
                  <img src="25.jpg">
               </td>
           </tr>
       </tbody></table> 
</div>

⑦绝对居中ie8以上支持

<div class="box">
    <div class="bd">
        <span>ie8以上支持</span>
    </div>
</div>

<style>
.box{position:relative;}
.bd{width:50%;height:50%;margin:auto;position:absolute;text-align: center; left:0;top:0;right:0;bottom:0;border:1px #ccc dashed;}
.bd span{vertical-align: middle;line-height: 150px;}
</style>

⑧小结：

单行文字，图片居中

text-align: center + line-height：300px ——> vertical-align:middle //ie7以上支持

div居中

text-align: center + line-height：300px ——> vertical-align:middle + display:inline-block //ie8以上支持

行内元素中的垂直居中 vertical-align

内联元素（以及被转化为内联元素的块元素）

display设置为table-cell的元素（ie6,7 并不支持）

td tr这样的元素作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。