水平居中
- 这里讨论的水平居中，是针对处于文档流中的元素。绝对定位(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来实现。
网友评论