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

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

            left:0;   
            margin:auto;   
            background:pink;   
}  

4,利用position:absolute属性,设置top/bottom/right/left

CSS Code复制内容到剪贴板

.four{   
            position:absolute;   
            width:140px;   
            height:140px;   
            top:0;   
            rightright:0;   
            bottombottom:0;   
            left:0;   
            margin:auto;   
            background:black;   
}  

5,利用display:table-cell属性使内容垂直居中

CSS Code复制内容到剪贴板

.five{   
            display:table-cell;   
            vertical-align:middle;   
            text-align:center;   
            width:120px;   
            height:120px;   
            background:purple;   
}  

6,最简单的一种使行内元素居中的方法,使用line-height属性

CSS Code复制内容到剪贴板

.six{   
            width:100px;   
            height:100px;   
            line-height:100px;   
            text-align:center;   
            background:gray;   
 }  

这种方法也很实用,比如使文字垂直居中对齐

7,使用css3的display:-webkit-box属性,再设置-webkit-box-pack:center/-webkit-box-align:center