刘家姥姥

垂直居中

1. 父元素确定的单行文本垂直居中

   通过设置父元素的height和line-height实现。

2. 父元素确定的多行文本、图片、块状元素垂直居中

   (1)使用table标签，因为td标签默认vertical-align:middle;

   示例如下：
   

   .wrap{height:300px;background:#ccc}

   
   

   <table><tbody><tr><td class="wrap">
   <div>
       <p>看我是否可以居中。</p>
       <p>看我是否可以居中。</p>
       <p>看我是否可以居中。</p>
       <p>看我是否可以居中。</p>
       <p>看我是否可以居中。</p>
   </div>
   </td></tr></tbody></table>

   (2)设置display:table-cell;vertical-align:middle;

   注意：在chrome、Firefox、IE8以上的浏览器才支持display:table-cell。
   

3. div垂直居中(绝对定位)

   <style type="text/css">
   div{
       width:100px;
       height:80px;
       background-color:#0CF;
       
       position:absolute;
       top:50%;
       left:50%;
       margin-top:-40px;/*取值由div的高决定，为height/2*/
       margin-left:-50px;/*取值由div的宽决定，为width/2*/
       }
   </style>

   
   

   <div>div垂直居中</div>