我们在网页布局的时候,经常会碰到需要居中的情况,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。
一、水平居中
1.元素宽高未知
当元素的宽高都未知的时候,可以利用以下两种方法将元素水平居中:
①CSS3 transform:
.
②flexbox:
.
2.居中元素为内联元素
常见的内联元素有:span, a, img, input, label 等等。
您可以在块级父元素内水平居中内联元素,只需css中加以下核心语法:
.
这种方法适用于display 为 inline, inline-block, inline-table, inline-flex 类型的元素。
3.居中元素为块级元素
常见的块元素:div, h1~h6, table, p, ul, li 等等。
①设置 margin:0 auto
.
此方法只能进行水平的居中,对浮动元素或绝对定位元素是无效的。
②转换为 inline-block 属性:
.
4.居中元素为浮动元素
加以下核心语法:
.
5.居中元素为绝对定位元素
①
.
②
.
二、垂直居中
1.元素宽高未知
当元素的宽高都未知的时候,也可以利用以下同样两种方法将元素垂直居中:
①CSS3 transform:
.
②flexbox:
.
适用于子元素为浮动、绝对定位、内联元素,均可垂直居中。
其中flexbox 是 CSS3 新增的属性,设计初衷就是为了解决像垂直居中这样的常见布局问题,相信未来flexbox布局会越来越多应用。
2. 元素宽高已知
①
.
②
.
3.居中元素为单行文本
①
.
将文本的 line-height 属性值设为和文字父容器一样的高度,但适用于只有一行文字的情况。
②
.
有时内联/文本元素可以垂直居中显示,只是因为它们上部和下部都有相等的padding。
4.居中元素为多行文本
①table:
.
②flexbox:
.
三、水平垂直居中
1.元素宽高已知
①负边距居中:
.
此方法灵活性差,不能自适应,且宽高不支持百分比尺寸和 min-/max- 属性。
②绝对居中:
div
元素的宽高支持百分比 % 属性值和 min-/max- 属性。
③transform :
.
④table-cell:
.
这种方法适用于子元素 display 为 inline, inline-block, inline-table, inline-flex 类型的元素,前提需要知道父元素的宽高,且父元素的宽高不能设为百分比数。
⑤font-size 结合 vertical-align:
.
该方法前提条件是需给父元素设一个合适的 font-size 值,该值一般为其父元素的高度除以 1.14 得到的值,并且子元素必须是一个 display 为 inline, inline-block, inline-table, inline-flex 类型的元素,此外还需在子元素内加上 vertical-align: middle 属性。
⑥文本内容:
text
2.元素宽高未知
①transform :
.
transform方法中元素既可以加宽高,也可不加,用于水平垂直居中布局。
②flexbox :
.
③grid:
body
该方法适用于只有一个元素的时候,作为非常新的布局方式,其兼容性也比较差。
- 上面只是把所有方法的代码要点罗列了一下,能满足所有的居中布局方案,如你还有其他好方法,欢迎交流指正。