居中方式总结

水平方向居中

1. 设置盒子的 margin: 0 auto;
2. 设置外层弹性盒 display: flex;，然后设置元素 justify-content: center;
3. TODO

垂直方向居中

1. 使用 vertical-align: middle; 但是这个属性生效的前提是要设置元素的display: inline-block;，并且需要一个兄弟元素作为参照物，让它垂直于兄弟元素的中心点。
   这个属性是寻找兄弟元素中最高的一个作为参照物。
   由于display: inline-block;行内块的布局在样式上零碎的问题很多，顾不推荐。
2. 通过伪元素 :before 实现垂直居中
   原理同第一条，只是创建了伪元素节点作为参照物。
3. 使用定位。
   设置父元素定位 position: relative;，子元素position: absolute;
   子元素left和top分别设置为50%，然后使用margin-left/top: -xxpx;或transform: translate(-50%);进行位移。
4. 使用flex弹性盒
   父元素： align-items: center;

推荐使用弹性盒flex

代码演示

<!-- html code -->
<div class='container'>
  <div class='item'></div>
</div>

// js code

/* css code */
.container {
  height: 300px;
  width: 300px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  height: 100px;
  width: 100px;
  background: skyblue;
}