首页 > 建站教程 > CSS3+HTML5 >  position定位和translate平移让块状容器水平和垂直都居中正文

position定位和translate平移让块状容器水平和垂直都居中

        之前,在块状容器垂直居中解决办法CSS让容器水平和垂直居中的八种方法两篇文章中,详细阐述了如何让块状容器水平垂直都居中。但是,不管哪种,都有缺陷,今天,我爱模板网再介绍一种,无论容器内容多少,始终垂直和水平都居中。代码如下:
.absolute-center{
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
        这种方案的好处刚才已经说了,其实就是利用绝对定位,先让容器的左上角在中间,然后利用css3的transform中的translate平移,将容器往左和往上各平移自身的一半,就能完全居中了。