Summary of CSS(3) achieving horizontal and vertical centering effects

CSS implements horizontal and vertical center alignment

It will be relatively simple to implement horizontal centering in CSS. Commonly, if you want to achieve horizontal centering of inline elements or inline-block elements, you can set text-align: center on its parent block-level element; if you want to achieve horizontal centering of block-level elements, You can set magin: auto. And if you want to achieve vertical center alignment, it may not be easy.

Below, I have summarized some methods to achieve horizontal and vertical center alignment. If there are any shortcomings, please point them out.

The implementation of horizontal and vertical centering can be divided into two major contents, one is The height adaptively changes with the content, The other is fixed height.

Fixed height to achieve horizontal and vertical centering

Method 1

The most common method is to use height + line-height, set the same value, and match text-align Use, you can achieve horizontal and vertical center alignment of text

<p class="container">Hello World！</p>.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

Disadvantages: Fixed height, unable to achieve vertical center alignment of two lines of text

Method 2

Use the absolute positioning method and use it with negative margin values. It can achieve the horizontal and vertical centering effect of elements.

<p class="container">Hello World！</p>.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Of course, you can use the calc function of CSS3 to simplify the above CSS code

##

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Disadvantages: fixed height , height cannot adapt to the content. The element breaks out of the document flow.

Method 3

Add an empty tag and make the element float, out of the document flow, to avoid affecting the layout of other elements.

<p class="space"></p>
<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.space {    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

Disadvantages: Vertical centering in this way requires a fixed height, and content adaptive height cannot be achieved. At the same time, redundant empty p elements appear.

Height adaptive implementation of horizontal and vertical centering

Method 1

There is a transform attribute in CSS3, and there is a translate movement function under this attribute. This function accepts two parameters. If both parameters are percentage values, the movement will be based on its own width and height. The movement mechanism of this function is similar to

position:relative.

<p class="container">Hello World！</p>.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半    border: 1px solid red;
}

Advantages: No need to set the height. The height adapts to the content.

Disadvantages: Elements are separated from the document flow. If the element that needs to be centered already exceeds the viewport in height, its top will be cropped by the viewport.

Method 2

We know that margin can be used to achieve horizontal center alignment, but the reason why margin cannot be used to achieve vertical centering is that the percentage value of margin is calculated based on width.

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

In the above code, since the percentage is calculated based on the width of the parent element (the parent element at this time is the body element), 50% at this time plus translate Negative values ​​do not achieve vertically centered layout.

However, there is a vh (viewport height) in CSS, which is equivalent to the height of

document.body.clientHeight or document.documentElement.clientHeight in the DOM , 1vh=1%, that is, 1vh is equal to 1% of the viewport height. For browser compatibility issues with the vh unit, see vh. Therefore, the above code can be changed to the following to achieve the horizontal and vertical centering effect.

<p class="container">Hello World！</p>.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

Method 3

There is flex layout (retractable layout box model, also called elastic layout box model) in CSS3, for those who are familiar with flex , it couldn’t be easier to use flex to achieve horizontal and vertical centering.

<p class="container">
    <p class="inner">
        <p>hello world!</p>
    </p>
</p>.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

When we make the parent element

display: flex, margin: auto can not only be centered horizontally, but also vertically Centered. This is because auto margins bisect the extra space horizontally or vertically.

Of course, you can also use

justify-content: center to define the alignment of the main axis of the flexible item, and align-items: center to define the alignment of the side axis of the flexible item. Way.

<p class="container">
    <p class="inner">
        <p>hello world</p>
    </p>
</p>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Method 4

You can use

display: table to simulate the table and set display: table to the child elements -cell, let it become a cell of the table, and set vertical-align: middle to achieve a vertically centered layout

<p class="container">
    <p class="inner">
        hello world！    </p>
</p>.container {
    display: table;         /* 让p以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

Using this method, there is no need to fix the height. You only need to give any height or no height to achieve the horizontal and vertical centering effect.

The above is the detailed content of Summary of CSS(3) achieving horizontal and vertical centering effects. For more information, please follow other related articles on the PHP Chinese website!