Introduction to several methods to achieve horizontal and vertical centering with CSS

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

<div class="container">Hello World！</div>

.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 absolute positioning Method, used with negative margin values. It can achieve the horizontal and vertical centering effect of elements.

<div class="container">Hello World！</div>

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

<div class="space"></div>
<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.space {
    float: left;
    height: 50%;
    margin-top: -150px;
}

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

Disadvantages: Vertical centering in this method requires a fixed height, and content adaptive height cannot be achieved. At the same time, redundant empty div 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.

<div class="container">Hello World！</div>

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

<div class="container">Hello World！</div>

.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), the 50% plus the negative value of translate at this time cannot achieve a 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.

<div class="container">Hello World！</div>

.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 friends who are familiar with flex, it is easier to use flex to achieve horizontal and vertical centering. It couldn't be simpler.

<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

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

<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.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-cell to the sub-element to make it For a cell of the table, set vertical-align: middle at the same time to achieve a vertically centered layout

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.container {
    display: table;         /* 让div以表格的形式渲染 */
    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 Introduction to several methods to achieve horizontal and vertical centering with CSS. For more information, please follow other related articles on the PHP Chinese website!