纯CSS实现水平并垂直居中的15种方式利用CSS实现水平并垂直居中是一个非常常见的面试问题，通过这篇文章你可以掌握15种

本文作者：Gavin，未经授权禁止转载。

利用CSS实现水平并垂直居中是一个非常常见的面试问题，通过这篇文章你可以掌握15种不同的CSS居中方式。

基础代码

为了使示例更加清晰，编写如下基础代码：

基础HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div class="father">
        <div class="child">Hello World</div>
    </div>
</body>
</html>

基础CSS

.father {
    border: 1px solid blue;
    width: 300px;
    height: 300px;
}

.child {
    width: 100px;
    height: 100px;
    background: aqua;
}

居中实现

一、绝对定位 + margin

.father {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

二、绝对定位 + calc

.father {
    position: relative;
}
.child {
    /*position: absolute;*/
    /*top: calc(50% - 50px);*/
    /*left: calc(50% - 50px);*/

    /*或者*/
    position: absolute;
    --widthChild: 100px;
    --heightChild: 100px;
    width: var(--widthChild);
    height: var(--heightChild);
    top: calc(50% - calc(var(--widthChild) / 2));
    left: calc(50% - calc(var(--heightChild) / 2));
}

三、绝对定位 + transform

.father {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

四、绝对定位+margin

.father {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

五、通过text-align

.father {
    line-height: 300px;
    text-align: center;
    font-size: 0;
}
.child {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left;
}

六、使用table-cell布局

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}

七、使用flex

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

八、使用Grid

.father {
    display: grid;
}
.child {
    align-self: center;
    justify-self: center;
}

九、writing-mode + text-align

.father {
    writing-mode: vertical-lr;
    text-align: center;
}
.child {
    writing-mode: horizontal-tb;
    display: inline-block;
    margin: 0 calc(50% - 50px);
}

十、伪元素 + calc

.father::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px; /*content宽度*/
}
.child {
    --widthChild: 100px;
    width: var(--widthChild);
    display: inline-block;
    vertical-align: middle;
    margin-left: calc(calc(50% - calc(var(--widthChild) / 2)));
}

十一、flex + margin

.father {
    display: flex;
}
.child {
    margin: auto;
}

十二、flex + align-self + margin

.father {
    display: flex;
}
.child {
    align-self: center;
    margin: 0 auto;
}

十三、网格 + 伪元素 + margin

.father {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
}
.father::before,.father::after {
    content: '';
}
.child {
    margin: 0 auto;
}

十四、纯网格

.father {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.child {
    grid-row: 2 / span 1; /*也可以使用2/3*/
    grid-column: 2 / span 1; /*也可以使用2/3*/
}

十五、网格 + margin

.father {
    display: grid;
}
.child {
    margin: auto;
}