css中常用的几种居中方法

Posted 2020-06-29

1:使用position:absolute,设置left、top、margin-left、margin-top的属性

position:absolute;
             width:200px;
            height:200px;
             top:50%;
             left:50%;
             margin-top:-100px;
             margin-left:-100px;
             background:red; 

2:使用position:fixed,同样设置left、top、margin-left、margin-top的属性

position:fixed;
             width:180px;
             height:180px;
              top:50%;
              left:50%;
              margin-top:-90px;
              margin-left:-90px;
              background:orange;

3：利用position:fixed属性，margin:auto这个必须不要忘记了。

position:fixed;
              width:160px;
              height:160px;
              top:0;
              right:0;
              bottom:0;
              left:0;
              margin:auto;
             background:pink;

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

position:absolute;
            width:140px;
            height:140px;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:black;
5，利用display:table-cell属性使内容垂直居中

display:table-cell;
             vertical-align:middle;
            text-align:center;
            width:120px;
            height:120px;
            background:purple;
6最简单的一种使行内元素居中的方法，使用line-height属性

width:100px;
            height:100px;
            line-height:100px;
             text-align:center;
            background:gray;