# 居中
下面介绍几种常用的垂直居中方法
<div class="outer">
<div class="content"></div>
</div>
1
2
3
2
3
html,body{
width: 100%;
height: 100%;
}
1
2
3
4
2
3
4
# absolute + margin 负值
.outer {
position: relative;
width: 100%;
height: 100%;
}
.content {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: #a00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# absolute + margin auto
.outer {
position: relative;
width: 100%;
height: 100%;
}
.content {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #a00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# absolute + translate
.outer {
position: relative;
width: 100%;
height: 100%;
}
.content {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #a00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# flex布局(不用固定宽高)（不兼容 IE8）
.outer {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 200px;
background-color: #a00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 伪元素和 inline-block / vertical-align(不用固定宽高)（兼容 IE8）
.box-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; //微调整空格
}
.box {
display: inline-block;
vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# transform(不用固定宽高)(不兼容 ie8 以下)
.box-wrap {
width:100%;
height:300px;
background:rgba(0,0,0,0.7);
position:relative;
}
.box{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13