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>