盒子水平居中实现方法

方法一：外边距(margin)

1.必须给盒子设置宽度；
2.盒子设置外边距margin:0 auto。（上下外边距为0）
注:行内元素或行内块元素若想水平居中，给父元素设置text-align:center。

方法二：绝对定位

①元素水平垂直居中
1. 对该元素设置绝对定位；
2. 设置left:50%; 当前参考物宽度的一半; margin-left: -小盒子宽度的一半；
3. 设置top:50%;当前参考物高度的一半;margin-top:-小盒子高度的一半。
②元素水平垂直居中
1. 对该元素设置绝对定位；
2. 四个方向值都设置为0；
3. 最后加一个margin:auto。

方法三：位移

1. 给子元素设置绝对定位position:absolute;
2. 子元素设置left:50%;当前参考物的宽度的一半；
3. 子元素设置top:50%;当前参考物的高度的一半；
4. 利用位移向左和向上拉取 transform:translate(-50%,-50%);百分数参考当前元素的宽高的一半。

相比定位的好处
1. 子元素变化之后，百分比也会跟着变化；
2. 子元素没有宽高，百分比也能计算出来。