元素居中

元素居中

注意:父元素为块级元素，子元素分以下三种情况讨论:

一.内联元素在父元素中居中:

• 水平居中:父元素将text-align的值设置为center
• 垂直居中:父元素将line-height的值设置为与父元素相同高度的值。

二.内联块元素在父元素中居中:

• 水平居中:父元素将text-align的值设置为center
• 垂直居中:给该元素设置vertical-align的值设置为middle；给父元素的before或者after伪元素设置height与父元素等高度,width为0,vertical-align的值设置为middle以及display,content属性。

三.块级元素在父元素中居中:

• 水平居中

  • 父元素设置margin:0 auto
    存在缺陷，就是当子元素的宽大于父元素的宽时，水平方向上并不居中。

  • 子元素设置相对定位，以及left:50%,margin-left:二分之一个子元素的宽度这三个属性。
    存在缺陷，就是margin-left的值必须手动计算，当子元素的宽改变，margin-left的值也需要改变，会很不方便。

  • 父元素设置相对定位，子元素设置绝对定位，以及left:50%,margin-left:二分之一个子元素的宽度这三个属性。
    存在缺陷同上一个。

• 垂直居中

  • 错误:父元素设置margin:auto 0
  • 错误:父元素设置相对定位，子元素设置绝对定位，以及top:50%,margin-top:二分之一个子元素的宽度这三个属性。
    存在外边距重叠
  • 父元素设置相对定位，子元素设置绝对定位，以及top:50%,tranform:translateY(-50%)

  总结:因此要实现块级元素在父元素中居中，需要父元素设置相对定位，子元素设置绝对定位，以及top:50%,left:50%,tranform:translate(-50%,-50%)

  top/left中的50%是基于父元素的宽和高进行的百分比,tranform中的translate的-50%是基于子元素的宽和高进行的百分比。