• 使用 margin: 0 auto 去使块级元素水平居中这个使用场景大家应该不陌生。
• 但不知道有没有发现，按道理来说 margin: auto 应该会使块级元素水平垂直居中，但是为啥使用之后只有水平方向起作用了，而垂直方向没有起作用呢？
• 想要明白为啥，那就得先知道 auto 是如何起作用的

auto 原理

• auto：自动。作用为自动填充剩余空间。
• 前提：
  • 块级元素的包含宽度会自动扩充，填满父元素，而包含高度却不会。
  • 对于一个块级元素，我们对其设置了宽高后，则：

    它的包含宽度 = margin-left + border + padding-left + content-width + padding-right + border + margin-right

  • 当我们给他的 margin 设置为 auto 时，元素会自动平分剩下的距离，从而达到一个水平居中的效果
  • 而包含高度不会自动扩充填满父元素，也就是说元素的包含高度是没有剩余空间的，设置了 auto 也没得平分，所以直接对上下方向设置 auto 是不能实现垂直居中的

使用 auto 设置垂直水平居中

• 原理
  • 通过定位扩充高度填满父元素，然后使用 margin: auto 垂直水平方向上都自动平分剩下的距离达到垂直水平居中
  • 对父元素设置 position: relative;
  • 对子元素设置 position: absolute;，并对上下左右都设置为0，填充多余空间
  • 这时候使用 margin: auto ，就会去自动平分多余的空间，实现元素垂直水平居中了
• 代码
  • HTML CODE

    <div class="outsidebox">
       <div class="insidebox"></div>
     </div>
    

  • CSS CODE

    .outsidebox {
      position: relative;
      width: 400px;
      height: 400px;
      background: #e6f3ff;
    }
    .insidebox {
      position: absolute;
      margin: auto;
      width: 100px;
      height: 100px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: skyblue;
    }
    

• 效果图

本文参考：blog.csdn.net/wuguidian11… tips：以该篇文章为知识基础，加上自己的理解