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

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

position:relative.

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

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.

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

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

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

.inner {
    margin: auto;
}

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.

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

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

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!