9种经典CSS垂直居中方法

1. 单行文本+line-height

HTML代码：

<div id="box">
    <div id="content">这是一行文字</div>
</div>

CSS代码：

#box {
    width: 300px;
    height: 200px;
}

#content {
    line-height: 200px;
}

2. table-cell + vertical-align

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    display: table-cell;
    width: 300px;
    height: 200px;
    vertical-align: middle;
}

3. absolute + margin负值

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    position: relative;
    width: 300px;
    height: 200px;
}

#content {
    position: absolute;
    width: 150px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
}

4. absolute + transform

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    position: relative;
    width: 300px;
    height: 200px;
}

#content {
    position: absolute;
    width: 150px;
    height: 100px;
    top: 50%;
    transform: translate(0, -50%);
}

5. absolute + margin: auto

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    position: relative;
    width: 300px;
    height: 200px;
}

#content {
    position: absolute;
    width: 150px;
    height: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
}

6. flex + align-items

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    display: flex;
    width: 300px;
    height: 200px;
    align-items: center;
}

7. flex + margin: auto

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    display: flex;
    width: 300px;
    height: 200px;
}

#content {
    margin: auto;
}

8. 伪元素 + height: 50% + margin负值

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    width: 300px;
    height: 200px;
}

#box:before {
    content: "";
    display: table;
    height: 50%;
}

#content {
    width: 150px;
    height: 100px;
    margin-top: -50px;
}

9. 伪元素 + height: 100% + inline-block + vertical-align

HTML代码：

<div id="box">
    <div id="content">content</div>
</div>

CSS代码：

#box {
    width: 300px;
    height: 200px;
}

#box:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#content {
    display: inline-block;
    width: 150px;
    height: 100px;
    vertical-align: middle;
}