让元素居中的三种方法

• 面试题
  如何让一个元素水平垂直居中?

demo结构如下

  <div id="box">
        <div id="x"></div>
  </div>

1. 父相子绝后，子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%)最常用方法

  #box{
    
    
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
    
    
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -100px;
         margin-top: -100px;
     }

2. 父元素设置成弹性盒，子元素横向居中，纵向居中

 #box{
    
    
         width: 400px;
         height: 400px;
         background: red;
         display: flex;
         justify-content: center;
         align-items: center;
    
     }
     #x{
    
    
         width: 200px;
         height: 200px;
         background: yellow;
       
     }

3, 子绝父相，子元素所有定位为0，margin设置auto自适应。

  #box{
    
    
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
     #x{
    
    
         width: 200px;
         height: 200px;
         background: yellow;
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         margin: auto;
     }