css实现盒子居中的方法

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

1. 普通盒子居中: 让左右margin为auto

 margin: 0 auto;  

2. 绝对定位的盒子居中: 先走父盒子宽度的一半left: 50%，然后再移动自身宽度的一半 margin-left: -50px。

//假设需要居中的盒子的宽度为100px
  position: absolute;
  left: 50%;
  margin-left: -50px;

3. flex布局实现盒子居中

	display: flex;
	justify-content: center;  //主轴元素居中
	align-items: center;     //侧轴元素居中