preface

Vertical center is a cliche in CSS, and it comes up a lot in interviews. So, today we’re going to talk about 9 different ways to center.

There are the usual flex, Transform, Absolute, and so on. CSS3 grid layout is also available. There are pseudo-element methods, yes, you read that right, ::after and ::before can also be centered.

9 ways to present

1, flex

The first thing you might think is Flex. Because it is simple enough to write intuitive, compatibility is not a problem. It is the first choice for mobile center.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

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

Two key properties are utilized: context-content and align-items, both set to center to center.

Note that the flex-Center here must be hung on the parent element so that the only child element is centered.

2. Flex + Margin

This is a variation of the Flex method. The parent element sets flex and the child element sets margin: auto; . The child element is “squeezed” into the middle by the surrounding margin.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: flex;
}

.wrapper > p {
    margin: auto;
}
Copy the code

Transform + Absolute

This combination is often used to center images.

<div class="wrapper">
    <img src="test.png">
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

It is also possible to move the relative orientation of the parent wrapper element into the child img element instead of the absolute orientation. The effect is the same.

4, table – cell

Use the table cell center effect display. As with Flex, you need to write on the parent element.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
Copy the code

5. The values of absolute + are equal in the four directions

Margin: Auto; And set the values of top, left, right, and bottom to the same value (not all of them need to be 0).

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
Copy the code

This method is generally used for the pop-up layer, need to set the width and height of the pop-up layer.

6, writing – mode

This method can be used to change the direction of the text display, such as making the text display vertical.

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    writing-mode: vertical-lr;
    text-align: center;
}

.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}
Copy the code

There are minor compatibility glitches, but most browsers, including mobile phones, already support writing-mode.

7, the grid

Like a table, a grid layout lets you align elements by row or column. In terms of layout, however, grids are more possible or easier than tables.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: grid;
}

.wrapper > p {
    align-self: center;
    justify-self: center;
}
Copy the code

But it’s not as compatible as Flex, especially with Internet Explorer, which only supports IE10 and above.

8, : : after

Can pseudo-elements also be used to center? It’s amazing. Here’s an example:

<div class="wrapper">
    <img src="test.png">
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}
Copy the code

The horizontal direction is easy to understand. After pulls img down to the middle.

9, : : before

Font-size: 0; Magic done together.

<div class="wrapper">
    <img src="test.png">
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
    font-size: 0;
}

.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: ' ';
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}
Copy the code

font-size: 0; The mystery is that you can eliminate gaps between labels. In addition, there is no risk of compatibility because pseudo-elements are written with basic CSS.

conclusion

There are nine intermediate methods presented today. Such as Flex, Absolute, grid, these commonly used methods can often help us solve the layout problem in the work. Magical features like Writing-mode, :: After, :: Before help us open up a corner of the CSS magic continent, which makes us want to explore more.

PS: Welcome to follow my public account “Chao Ge Front-end Small stack” to exchange more ideas and technologies.