css 元素水平垂直方向置中

標籤：

 一、text-align:center;vertical-align:middde；

　　html部分

<div class="parent">    <div class="child">    </div></div>

　　css部分  

    .parent{        width: 400px;        height:400px;        background:#666666;        text-align: center;        font-size: 0px;    }    .child{        font-size: 16px;        background: #ccc;        display: inline-block;        vertical-align: middle;    }    .parent:after{        content: ‘‘;        width: 0;        height: 100%;        display: inline-block;        vertical-align: middle;    }/*    .add{         width: 0;         height: 100%;         display: inline-block;         vertical-align: middle;    }*/

　　也可不用虛擬元素after，在child的div後面寫一個span  class為add的標籤。

　　font-size:0px;解決當child元素內的字超過一行 垂直置中失效問題。

　　

 二 、定位 top left right bottom margin:auto 來實現；

 

css 元素水平垂直方向置中