CSS div上下居中

一、varticle-align

(1) 父div外层配置一个div,同时设置为表格元素 (display: table),设置宽度。

(2) 父div配置为表格单元格元素 (display: table-cell),宽度为100%,设置高度。

(3) 父div配置居中属性(vertical-align: middle),使子div上下居中。

(4) 子div通过margin配置左右居中(margin: auto)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.table {
display: table;
width: 400px;
}
.box1{
display: table-cell;
width: 100%;
height: 400px;
vertical-align: middle;
border: solid 2px red;
}
.box2{
margin: auto;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="table">
<div class="box1">
<div class="box2">
</div>
</div>
</div>