水平及垂直居中的几种方案总结

 1.水平居中方案

  01(行内级元素):给父元素设置text-align:center;

  02(块级元素):给自身盒子设置margin:0 auto;

  03(flex布局):-justify-content:center;

  04(绝对定位):元素有宽度==>left:0;right:0;margin: 0 auto;

  2.垂直居中方案

  01(绝对定位):元素有高度==>top:0;bottom:0;margin:auto 0;

  02(flex布局):align-items:center;

  03(相对定位:top/translate):

  两件事:

  A.先相对定位让子元素向下移动父元素的50%==>top的百分比参照对象默认值值是包含块(即父元素).

  B.再位移:X不变,Y让子元素向上移动自身元素的50%==>translate的百分比参照对象默认值是自身.transform: translate(0, -50%)

  代码如下:

  .box {

    position: relative;

    top: 50%;

    transform: translate(0, -50%)

  }

  04(单行文本):给父元素设置line-height=height;

  05(vertical-align:middel): 只能对行内元素有效,如有图片等之类的,由于是基线对齐,会发生各种偏移,因此不推荐使用此方式.