The author:Gavin, prohibit reprinting without authorization.

Horizontal and vertical centering with CSS is a very common interview question, and in this article you’ll learn about 15 different ways to center CSS.

Based on the code

To make the example clearer, write the following basic code:

Basic HTML

<! DOCTYPEhtml>
<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>
Copy the code

Basic CSS

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

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

Center of the implementation

First, absolute positioning + margin

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

Two, absolute positioning + calC

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

    / * or * /
    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));
}
Copy the code

Absolute position + transform

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

Fourth, absolute positioning +margin

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

5, 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;
}
Copy the code

Use table-cell layout

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

Use Flex

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

Use Grid

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

9, 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);
}
Copy the code

Pseudoelement + calc

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

Flex + margin

.father {
    display: flex;
}
.child {
    margin: auto;
}
Copy the code

Flex + align-self + margin

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

Grid + pseudo-element + margin

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

14. Pure grid

.father {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    grid-template-rows: repeat(3.1fr);
}
.child {
    grid-row: 2 / span 1; /* You can also use 2/3*/
    grid-column: 2 / span 1; /* You can also use 2/3*/
}
Copy the code

15. Grid + Margin

.father {
    display: grid;
}
.child {
    margin: auto;
}
Copy the code