CSS (3) Summary of horizontal vertical centering effect

CSS for horizontal vertical center alignment

Horizontal centering in CSS is easier. Commonly, if you want to implement inline elements or inline-block elements horizontally, you can set the implementation on their parent block-level elements, or text-align: center if you want to align the horizontal centers of block-level elements magin: auto . And if you want to align vertically, it might not be easy.

Below, I've summed up some of the ways to achieve horizontal vertical center alignment. If there are any deficiencies, hope to point out.

Horizontal Vertical Center implementation can be divided into two main content, one is the height with the content of adaptive changes, one is fixed height .

Fixed height for horizontal vertical centering

Method One

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

<p class= "Container" >hello world! </p>.container {    width:300px;    height:300px;    line-height:300px;    Text-align:center;    border:1px solid Red;}

Disadvantage: fixed height, unable to achieve vertical center alignment of two lines of text

Method Two

Use absolute positioning, with a negative value of margin. You can achieve the horizontal vertical center effect of the element.

<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 CSS3 's Calc function 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;}

Cons: fixed height, height not adaptive content. Element out of the document flow.

Method Three

Add an empty label and float the element, leaving 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;}

Disadvantage: Vertical centering in this way requires a fixed height and cannot achieve adaptive height of the content. At the same time, an extra empty P element appears.

Highly adaptive for horizontal vertical centering

Method One

There is a transform property in CSS3, and there is a translate move function under this property, which accepts two parameters. If all two parameters are percent values, they are moved based on their own width and couture. This function moves in a position:relative similar mechanism.

<p class= "Container" >hello world! </p>.container {    position:absolute;    top:50%;    left:50%;    Transform:translate (-50%,-50%);//half of its width and height    border:1px solid red;}

Advantage: no height is required. The height is adaptive with the content.
Disadvantage: The element is out of the document stream. If the element that needs to be centered is already above the viewport in height, the top of it is trimmed off by the viewport.

Method Two

We know that you can use margin to achieve horizontal center alignment, but you cannot use margin to vertically center because the percent value of margin is calculated based on the 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, because 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 translate negative value at this point does not achieve a vertical center layout.

However, there is a VH (viewport height) in the CSS, which is equivalent to the height of the DOM, document.body.clientHeight document.documentElement.clientHeight 1vh=1%, which is 1VH equals 1% of the viewport height. The browser compatibility issues for VH units can be seen in VH. Therefore, the above code can be changed to the following, you can achieve horizontal vertical center effect.

<p class= "Container" >hello world! </p>.container {    width:300px;    MARGIN:50VH Auto 0;    Transform:translatey ( -50%);    border:1px solid Red;}

Method Three

Flex layout (Retractable layout box model, also known as Elastic layout box model) exists in CSS3, and it's easy to use flex to achieve horizontal vertical centering for friends who are familiar with flex.

<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 , we margin: auto can not only center horizontally, but also be vertically centered. This is because the auto margin evenly splits the extra space in the horizontal or vertical direction.

Of course, you can also use to define the alignment of the elastic project spindle to define the alignment of the justify-content: center align-items: center Flex project's side axis.

<p class= "Container" >    <p class= "inner" >        <p>hello world</p>    </p></ P>.container {    Display:flex;    Justify-content:center;    Align-items:center;    HEIGHT:100VH;}

Method Four

You can use it display: table to simulate a table and set it to a cell in a table, and display: table-cell set it to a vertical-align: middle vertical center layout.

<p class= "Container" >    <p class= "inner" >        Hello world!    </p></p>.container {    display:table;         /* Let p render in tabular form */    width:100%;    border:1px solid red;}. inner {    Display:table-cell;    /* Let child elements render as table cells */    text-align:center;    Vertical-align:middle;}

With this method, no fixed height is required. You can achieve horizontal vertical centering by simply giving any height or not to the height.