transform的妙用---實現div不定寬高垂直水平居中

transform的兼容性

transform的兼容性仍是比較樂觀的。IE9如下不兼容，IE9支持代替的-ms-transform屬性不過只支持2D轉換。

谷歌和Safari支持代替的-webkit-transform屬性。IE9以上、火狐和歐朋是兼容的。

 

transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

在此，可妙用其移動的屬性。

碰見div不定寬和高垂直水平居中的問題。記得之前都是用js去實現。如今能夠用 transform進行實現。

 

<div class="demo">
　　 <img src="img/pic3.jpg" />
</div>

.demo{
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}