通常分为2种情况,已知元素的宽度或未知。
我们先说说在已知的情况下,要如何设置。
举例说明:有2个元素,让子元素相对于父元素水平垂直居中。
html代码:
css设置元素水平垂直居中显示
1、利用定位及设置元素margin值为自身的一半。
css代码:
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
position: relative;
}
.innerbox{
width: 300px;
height: 100px;
border: 5px solid #f00;
font-size: 16px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -150px;
}
2、margin:auto
css代码:
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
position: relative;
}
.innerbox{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 300px;
height: 100px;
margin: auto;
border: 5px solid #f00;
}
说明: position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高,那么多余的空间,会被margin:auto平均分配。
查看demo
跟已知元素宽高相比,实现未知元素宽高水平垂直居中显示的方法较多。
1、利用css3属性transform实现。
css代码:
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
position: relative;
}
.innerbox{
position: absolute;
left: 50%;
top: 50%;
border: 5px solid #f00;
transform: translate(-50%,-50%);
}
2、将父元素设置成display: table, 子元素设置为单元格 display: table-cell。这个方法跟上面介绍的方法不同,它不是让元素居中,而是让元素包含的内容居中。
css代码:
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
display: table;
}
.innerbox{
display: table-cell;
vertical-align: middle;
text-align: center;
border: 5px solid #f00;
}
3、css3新的布局方法,弹性布局 display: flex。这个方法,在已知或未知元素宽高的情况下,都能使元素居中显示。
css代码:
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.innerbox{
width: 300px; /*宽度可以省略*/
height: 100px; /*高度可以省略*/
border: 5px solid #f00;
font-size: 16px;
}
说明: 此方法只支持IE9+以上的浏览器。display: flex代表弹性布局,align-items: center 代表垂直方向上的居中,justify-content: center代表水平方向上的居中。这些是css3中的新属性,感兴趣的同学可以查找相关资料学习。这里不多介绍。demo