盒子水平居中实现方法

方法一:外边距(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. 子元素没有宽高,百分比也能计算出来。

你可能感兴趣的:(html)