利用css3的transform实现垂直居中

css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

下面的代码利用css3的transform来实现垂直居中和水平居中

水平居中
.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}



垂直居中
.center-horizontal {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

 

一个最长的用法就是：让弹出的元素始终位于页面的中间位置。
首先position: fixed; top: 50%; left: 50%;让这个图片的左上角处在屏幕的正中间。然后让他上下位移transform:translateX(-50%) translateY(-50%);就是相对于这个图片的宽高的50%，也就是一半。移回来。

 

.center-vertical {
    position: fixed;
    top: 50%;

    left:50%;
   

   -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%,-50%);

    -moz-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

    transform: translate(-50%, -50%);

}