div水平垂直居中

项目中经常要用到的布局
我常用的有3种

方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 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;
       
     }