元素居中
注意:父元素为块级元素,子元素分以下三种情况讨论:
一.内联元素在父元素中居中:
- 水平居中:父元素将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%是基于子元素的宽和高进行的百分比。