Several CSS can be made variable width horizontal high vertical centering method

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/alnorthword/article/details/102757045

Several CSS can be made variable width horizontal high vertical centering method

We used flex, transform, absolute etc. There grid layout, as well as CSS3 pseudo-element method, yes, you read right, you can achieve the middle; I believe we have not used :: after and :: before, just to understand! The following work is to collect, for everyone to share!

• transform + absolute

<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%);
}

This combination, commonly used in the image centered.
It can also be the parent element wrapper relative positioning of child elements img moved in, replacing absolute positioning. The effect is the same.

• absolute + value equal to four directions

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

Use absolute positioning layout, set the margin: auto ;, and set the top, left, right, equal to the value of the bottom of the can (not necessarily all 0).
This method is generally the width and height for ejecting layer, the need to set up the popup

• flex

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

Key attributes: justify-content and align-items, are set Center, centering can be achieved, flex-center hung in the parent element to which only sub-elements such that center.

• flex + margin

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

    display: flex;
}

.wrapper > p {
    margin: auto;
}

Parent elements set flex, child elements set margin: auto ;. It can be understood as being sub-elements around the margin "squeeze" to the middle.

• table-cell

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

Using a table to show the effect of centering the cell

• writing-mode

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

This method can change the display direction of the text, such as text display is changed so that the vertical direction

• grid

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

The grid layout allows us to align rows or columns of elements. However, the layout, the grid is more likely to do more than form or simple, but it is better to flex on compatibility, especially IE browser, supports only IE10 and above.

• ::after

<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 well understood. The vertical direction, as will be appreciated img :: after the intermediate pulled down.

• ::before

<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; mystery is that the gap between the label can be eliminated. In addition, because the mix of pseudo-elements, are the most basic of CSS written, so no compatibility risks.