水平居中
元素为文本或者图片等行内元素时,可以通过text-align:center
实现。
当设置的元素为块元素时,text-align:center
就不起作用了,这时候分两种情况:
1.定宽块状元素
通过设置左右 margin 为 auto 即可实现。
margin:0 auto
2. 不定宽块状元素
- 加入 table 标签;
- 设置 display:inline 方法,然后 text-align:center 实现。与第一种类似,显示类型设为行内元素;
- 优势:不用增加无语义标签
- 缺点:变成了行内元素,少了一些功能,例如长度。
- 设置 position:absolute 和 left 50%,利用相对定位的方式,将元素左偏移50%;
垂直居中
父元素确定高度的单行文本 通过设置 line-height 与 height 相同的值即可完成。 line-height 与 font-size 的计算之差,在 CSS 中称为“行间距”,分为两半,分别加到一个文本内容的顶部和底部。 缺点:当文字内容的长度大于块的宽时,就有内容脱离了块。
父元素高度确定的多行文本
-
使用 padding-top 和 padding-bottom 来居中。 利用父元素高度减去文本高度,所得的值平分到 top bottom,达到居中的目的。
-
使用插入 table (包括 tbody tr td) 标签,同时设置 vertical-align:middle (在父元素设置此样式时,会对 inline-block) 类型的子元素都有用。
-
在 chrome firefox IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell (设置为表格单元显示),激活 vertical-align 属性。 优点:不用加多余的无意义的标签 缺点:兼容性差,且修改了 display 的 block 变成了 table-cell,破坏了原有的块状元素的性质。