我们在网页布局的时候,经常会碰到需要居中的情况,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。

水平居中

元素宽高未知

当元素的宽高都未知的时候,可以利用以下两种方法将元素水平居中:

①CSS3 transform:

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

②flexbox:

.parent {
display: flex;
justify-content: center;
}

居中元素为内联元素

常见的内联元素有:span, a, img, input, label 等等。

您可以在块级父元素内水平居中内联元素,只需css中加以下核心语法:

.parent{
text-align: center;
}

这种方法适用于display 为 inline, inline-block, inline-table, inline-flex 类型的元素。

居中元素为块级元素

常见的块元素:div, h1~h6, table, p, ul, li 等等。

①设置 margin:0 auto

.parent {
width: 100%;
}
.child {
width: 800px;
height: 100px;
margin: 0 auto;
background: #999;
}

此方法只能进行水平的居中,对浮动元素或绝对定位元素是无效的。

②转换为 inline-block 属性:

.parent {
text-align: center;
}
.child {
display: inline-block;
}

居中元素为浮动元素

加以下核心语法:

.child {
width: 100px;
float: left;
position: relative;
left: 50%;
margin-left: -50px;
}

居中元素为绝对定位元素


.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}


.parent {
position: relative;
}
.child {
position: absolute;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}

垂直居中

元素宽高未知

当元素的宽高都未知的时候,也可以利用以下同样两种方法将元素垂直居中:

①CSS3 transform:

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateY(-50%);
}

②flexbox:

.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

适用于子元素为浮动、绝对定位、内联元素,均可垂直居中。

其中flexbox 是 CSS3 新增的属性,设计初衷就是为了解决像垂直居中这样的常见布局问题,相信未来flexbox布局会越来越多应用。

元素宽高已知


.parent {
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}


.parent {
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto 0;
}

居中元素为单行文本


.text {
line-height: 200px;
height: 200px;
}

将文本的 line-height 属性值设为和文字父容器一样的高度,但适用于只有一行文字的情况。


.link {
padding-top:30px;
padding-bottom:30px;
}

有时内联/文本元素可以垂直居中显示,只是因为它们上部和下部都有相等的padding。

居中元素为多行文本

①table:

.parent {
display: table;
}
.child {
display: table-cell;
margin: 0;
vertical-align: middle;
}

②flexbox:

.parent {
display: flex;
justify-content: center;
flex-direction: column;
height:400px;
}

水平垂直居中

元素宽高已知

①负边距居中:

.parent {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

此方法灵活性差,不能自适应,且宽高不支持百分比尺寸和 min-/max- 属性。

②绝对居中:

div {
width: 100px;
height: 100px;
margin: auto;
position: fixed;
//absolute is ok
top: 0;
right: 0;
bottom: 0;
left: 0;
}

元素的宽高支持百分比 % 属性值和 min-/max- 属性。

③transform :

.parent {
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

④table-cell:

.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
display: inline-block;
background-color: #999;
}

这种方法适用于子元素 display 为 inline, inline-block, inline-table, inline-flex 类型的元素,前提需要知道父元素的宽高,且父元素的宽高不能设为百分比数。

⑤font-size 结合 vertical-align:

.parent {
font-size: 175.4px;
height: 200px;
text-align: center;
}

.child {
vertical-align: middle;
display: inline-block;
font-size: 12px;
width: 50px;
height: 50px;
background-color: #999;
}

该方法前提条件是需给父元素设一个合适的 font-size 值,该值一般为其父元素的高度除以 1.14 得到的值,并且子元素必须是一个 display 为 inline, inline-block, inline-table, inline-flex 类型的元素,此外还需在子元素内加上 vertical-align: middle 属性。

⑥文本内容:

text {
height: 100px;
line-height: 100px;
text-align: center;
}

元素宽高未知

①transform :

.parent {
position: relative;
}
.child {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

transform方法中元素既可以加宽高,也可不加,用于水平垂直居中布局。

②flexbox :

.parent {
display: flex;
justify-content: center;
align-items: center;
}

③grid:

body, html {
height:100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}

该方法适用于只有一个元素的时候,作为非常新的布局方式,其兼容性也比较差。

上面只是把所有方法的代码要点罗列了一下,能满足所有的居中布局方案,如你还有其他好方法,欢迎交流指正哦。



CSS      CSS 布局

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!