css实现盒子居中的三种方法

这里记录了用css实现盒子居中的三种方法

普通盒子居中: 让左右margin为auto
margin: 0 auto;

绝对定位的盒子居中: 先走父盒子宽度的一半left: 50%，然后再移动自身宽度的一半 margin-left: -50px。
//假设需要居中的盒子的宽度为100px
position: absolute;
left: 50%;
margin-left: -50px;

flex布局实现盒子居中
display: flex;
justify-content: center; //主轴元素居中
align-items: center; //侧轴元素居中