垂直居中是布局中十分常见的效果之一,如果我们想实现下图的效果:
首先我们写两个div:(下面的介绍中,我们称外层div为 父div ,里面的div为 子div )。
<body>
<div class="content">
<div>我是需要垂直居中的div</div>
</div>
</body>
且给两个div添加最基本样式:
.content {
height: 200px;
width: 500px;
border: 1px solid blue;
}
.content>div {
text-align: left;
width: 200px;
height: 50px;
background: red;
}
现在的效果如下:
下面来介绍一下如何实现垂直居中的:
方法1:用table-cell属性:
给父div添加下面的样式即可:
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2:用flex属性: [可改造成垂直水平居中]
给父div添加下面的样式即可:
.box {
display: flex;
/*定义子级元素垂直居中*/
align-items: center;
/* 定义子级元素水平居中 */
/* justify-content: center; */
}
方法3:用绝对定位和负边距: [可改造成垂直水平居中]
此方法只针对子div元素高度固定的情况使用!
给父div设置 position: relative; 给子div添加下面的样式即可:
.inner {
position: absolute;
top: 50%;
left: 0;
/* 子div高度的一半 */
margin-top: -25px;
}
方法4:用绝对定位和translate: [可改造成垂直水平居中]
给父div设置 position: relative; 给子div添加下面的样式即可:
.inner {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
方法5:用:after来占位: [可改造成垂直水平居中]
给父div添加:after样式:
.box:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
然后给子div添加下面的样式即可:
.inner {
display: inline-block;
vertical-align: middle;
}
如果想要水平居中,给父div添加下面的样式:
.box{
/* 子div左右居中 */
text-align: center;
}
方法6:用flex属性和margin: [可改造成垂直水平居中]
给父div设置 display: flex; 给子div添加下面的样式即可:
.inner {
/* 垂直居中 */
margin: auto 0;
/* 设置垂直水平居中 */
/* margin: auto; */
}
除了上面几种稍微改造代码,就可以实现垂直水平都居中的,
下面再来介绍一种实现垂直水平都居中的方法:
方法:用绝对定位和0
给父div设置 position: relative; 给子div添加下面的样式即可:
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}