本文已参与「新人创作礼」活动，一起开启掘金创作之路。

盒子居中的三种方法

利用定位（子绝父相）、margin-left、和margin-top实现

子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。

缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值

 .father {
             /* 给父盒子设置相对定位 */
             position: relative;
             width: 500px;
             height: 500px;
             /* 让父盒子水平居中 */
             margin: 0 auto;
             border: 3px solid #000;
         }
 ​
         .son {
             /* 子盒子设置绝对定位 */
             position: absolute;
             /* 向右、向下移动父盒子的一半 （偏移量） */
             left: 50%;
             top: 50%;
             /* 向左移动自身宽的一半，向上移动自身盒子高的一半 */
             margin-left: -100px;
             margin-top: -50px;
             width: 200px;
             height: 100px;
             background-color: pink;
         }

 <div class="father">
     <div class="son"></div>
 </div>

利用定位（子绝父相）、transfrom属性实现

原理与上图类似，只是利用位移来完成子盒子最后的移动，与上面方法的区别就在于，transfrom只用一句代码就可以实现，如果子盒子后期修改了宽高，居中的代码不用修改。

实现盒子居中效果：position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);

 .father {
             /* 给父盒子设置相对定位 */
             position: relative;
             width: 500px;
             height: 500px;
             /* 让父盒子水平居中 */
             margin: 0 auto;
             border: 3px solid #000;
         }
 ​
         .son {
             /* 子盒子设置绝对定位 */
             position: absolute;
             /* 向右、向下移动父盒子的一半 （偏移量） */
             left: 50%;
             top: 50%;
             /* 向左移动自身宽的一半，向上移动自身盒子高的一半 */
             width: 200px;
             height: 100px;
             /* translate若使用百分比，是相对于自身的比例的位移 */
             transform: translate(-50%, -50%);
             background-color: pink;
         }

利用flex布局实现盒子居中

相较于上面两种方法，这种方法最简单，也最实用，不过它会改变当前盒子内的布局

使用时只需给父盒子添加display: flex;（应用flex布局）justify-content: center;（主轴居中，默认水平方向）align-items: center;（侧轴居中，默认垂直方向）

 .father {
             /* 给父盒子添加flex布局 */
             display: flex;
             /* 主轴居中 */
             justify-content: center;
             /* 侧轴居中 */
             align-items: center;
             width: 500px;
             height: 500px;
             /* 让父盒子水平居中 */
             margin: 0 auto;
             border: 3px solid #000;
         }
 ​
         .son {
             width: 200px;
             height: 100px;
             background-color: pink;
         }

\