Preface

Vertical centering is a common topic in CSS and is often mentioned during interviews.So today, let's talk about nine different ways of centering.

Common flex, transform, absolute, and so on.There are also grid layouts for CSS3.There are also pseudo element methods, yes, you can read them correctly:: after and:: before can also achieve centering.

9 methods of rendering

1,flex

Your first reaction may be flex.Because it is easy and intuitive to write, there is no problem with compatibility.It is the preferred way of centering on the mobile phone side.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

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

Two key attributes, justify-content and align-items, are used to center.

It is important to note that the flex-center here must be hung on the parent element in order to center the only child element in it.

2,flex + margin

This is a variant of the flex method.The parent element sets flex, and the child element sets margin: auto;.It can be understood that the child elements are "squeezed" into the middle by the margins around them.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: flex;
}

.wrapper > p {
    margin: auto;
}

3,transform + absolute

This combination is often used for centered display of pictures.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}

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

Of course, you can also move the relative positioning of the parent element wrapper into the child element img instead of the absolute positioning.The effect is the same.

4,table-cell

Display using table's cell centering effect.Like flex, you need to write on the parent element.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

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

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

With an absolute positioning layout, set margin:auto; and set the top, left, right, and bottom values equal (not necessarily all 0).

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.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;
}

This method is generally used for the ejection layer, and the width and height of the ejection layer need to be set.

6,writing-mode

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

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

.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;
}

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

7,grid

Like tables, grid layouts allow us to align elements by row or column.On the layout, however, grids are more likely or simpler than tables.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    display: grid;
}

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

However, it is not as compatible as flex, especially IE browsers, which only support IE10 and above.

8,::after

Can pseudo elements also be used for centering?It's still amazing. Here's an example:

<div class="wrapper">
    <img src="test.png">
</div>

.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;
}

Horizontal direction is well understood.Vertical direction, can be interpreted as: after pulls the img down to the middle.

9,::before

The other is to work with font-size: 0; a common magic.

<div class="wrapper">
    <img src="test.png">
</div>

.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;
}

font-size: 0; the mystery is that it eliminates gaps between tags.In addition, there is no risk of compatibility because pseudo elements are all written in the most basic CSS.

summary

Nine methods of centering are described today.Like flex, absolute, grid, these common methods often help us solve layout problems in our work.And like writing-mode,:: after,:: before, these magical features seem to have helped us turn a corner of the magical land of CSS, which is fascinating and we can't help but want to explore more.

PS: Welcome to my public number "Super Gogh Front End Stack" to share more ideas and technologies.