让盒子居中的三种方式

demo结构如下

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

第一种:父相子绝

//子分部向左向上移动本身宽度和高度的一半(也可以用 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;
     }

第二种:父元素设置成弹性盒，子元素横向居中，纵向居中

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

第三种:子绝父相

//子元素所有定位为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;
     }