块元素实现水平、垂直居中

使用CSS3 Transforms实现垂直、水平居中

垂直实现原理

水平垂直居中实现代码

.parent  {
     width :  200px ;
     height :  200px ;
     background-color :  black ;
}
.child  {
     position :  relative ;
     height :  100px ;
     width :  100px ;
     top :  50% ;
     left :  50% ;
     background-color : red ;
    -webkit-transform : translateX ( -50% ) translateY ( -50% ) ;
    -moz-transform : translateX ( -50% ) translateY ( -50% ) ;
    -o-transform : translateX ( -50% ) translateY ( -50% ) ;
    -ms-transform : translateX ( -50% ) translateY ( -50% ) ;
    transform : translateX ( -50% ) translateY ( -50% ) ;
}

DEMO

DEMO

或者相对父元素定位也是可以的

.parent  {
     width :  200px ;
     height :  200px ;
     background-color :  black ;

     position :   relative ;

}
.child {
    position:  absolute ;
     height :   100px ;
     width :   100px ;
     top :   50% ;
     left :   50% ;
     background-color : red ;
    -webkit-transform :  translateX ( -50% )  translateY ( -50% ) ;
    -moz-transform :  translateX ( -50% )  translateY ( -50% ) ;
    -o-transform :  translateX ( -50% )  translateY ( -50% ) ;
    -ms-transform :  translateX ( -50% )  translateY ( -50% ) ;
    transform :  translateX ( -50% )  translateY ( -50% ) ;
}