怎样让一个元素居中，详解！

矫情吗；* 2023-06-10 14:28 23阅读 0赞

css 居中，以下8个方法，带你了解那些你可能还不知道的元素居中   
方法1：table-cell

html结构：  
<div class="box box1">  
        <span>垂直居中</span>  
</div>  
css：  
.box1\{  
    display: table-cell;  
    vertical-align: middle;  
    text-align: center;         
\}  
  
方法2：display:flex  
  
.box2\{  
    display: flex;  
    justify-content:center;  
    align-items:Center;  
\}  
方法3：绝对定位和负边距  
.box3\{position:relative;\}  
.box3 span\{  
            position: absolute;  
            width:100px;  
            height: 50px;  
            top:50%;  
            left:50%;  
            margin-left:-50px;  
            margin-top:-25px;  
            text-align: center;  
        \}  
方法4：绝对定位和0  
.box4 span\{  
  width: 50%;  
  height: 50%;  
  background: \#000;  
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  
\}  
这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。  
不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。  
  
方法5：translate  
  
.box6 span\{  
            position: absolute;  
            top:50%;  
            left:50%;  
            width:100%;  
            transform:translate(-50%,-50%);  
            text-align: center;  
        \}  
这实际上是方法3的变形，移位是通过translate来实现的。  
  
方法6：display:inline-block  
.box7\{  
  text-align:center;  
  font-size:0;  
\}  
.box7 span\{  
  vertical-align:middle;  
  display:inline-block;  
  font-size:16px;  
\}  
.box7:after\{  
  content:'';  
  width:0;  
  height:100%;  
  display:inline-block;  
  vertical-align:middle;  
\}  
这种方法确实巧妙...通过:after来占位。  
  
方法7：display:flex和margin:auto  
  
.box8\{  
    display: flex;  
    text-align: center;  
\}  
.box8 span\{margin: auto;\}

方法8：display:-webkit-box  
  
.box9\{  
    display: -webkit-box;  
    -webkit-box-pack:center;  
    -webkit-box-align:center;  
    -webkit-box-orient: vertical;  
    text-align: center  
\}