css中常用的几种居中方法(推荐)

2020-05-05 07:30:11易采站长站整理

CSS Code复制内容到剪贴板

.seven{   
            width:90px;   
            height:90px;   
            display:-webkit-box;   
            -webkit-box-pack:center;   
            -webkit-box-align:center;   
            background:yellow;   
            color:black;   
}  

8,使用css3的新属性transform:translate(x,y)属性

CSS Code复制内容到剪贴板

.eight{   
            position:absolute;   
            width:80px;   
            height:80px;   
            top:50%;   
            left:50%;   
            transform:translate(-50%,-50%);   
            -webkit-transform:translate(-50%,-50%);   
            -moz-transform:translate(-50%,-50%);   
            -ms-transform:translate(-50%,-50%);   
            background:green;   
}  

这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好

9、最高大上的一种,使用:before元素

CSS Code复制内容到剪贴板

.nine{   
            position:fixed;   
            display:block;   
            top:0;   
            rightright:0;   
            bottombottom:0;   
            left:0;   
            text-align:center;