水平居中
- 这里讨论的水平居中,是针对处于文档流中的元素。绝对定位(absolute),固定定位(fixed),浮动(float)这三种定位的元素由于脱离了文档流,如果要水平居中只能通过设置top/right/bottom/left位置达到。这里讨论的水平居中是针对还处于文档流中的元素,也就是无定位(static)和相对定位(relative)元素。文档流中的元素分为block,inline-block,inline三种显示模式,所以水平居中也分为三种方式:
- 对于block元素,水平居中通过设置margin: 0 auto来实现。
- 对于inline-block元素,需要通过设置父元素的text-align:center来实现。
- 对于inline元素同inline-block元素。
垂直居中
- 文字垂直居中可以用line-height等于容器高度来实现。
- 如果是图片,可以使用padding:xxpx 0来实现。