元素居中的方式

如何让一个元素在他的父元素中上下左右居中？

• 共同的dom结构如下

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

第一种：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）

  #box{
         width: 400px;
         height: 400px;
         background: red;
         position: relative;
     }
   #box2{
         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;
    
     }
     #box2{
         width: 200px;
         height: 200px;
         background: yellow;
       
     }

第三种：父相子绝，子元素所有定位为0，margin设置auto自适应。

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

• 这里只是我能想到的三种方式，欢迎大家说出更多的方式，一起学习