How CSS achieves vertical horizontal centering

This article mainly introduces about how CSS to achieve vertical horizontal center, has a certain reference value, now share to everyone, the need for friends can refer to

Objective

Often asked in the interview, how to use CSS to achieve a vertical horizontal orientation of the element, especially when the pen test, the frequency of the problem is relatively high, of course, in our lives, there will often be vertical level of the demand for the center.

Three options for vertical horizontal centering of CSS

1. Elements inside the container Display:inline/inline-block

This situation is relatively easy, directly set the text-align of the container can achieve the horizontal center of content elements, set the vertical center to set the height of the container, and then set the easy line-height===height can be, as follows:

     <p class= "Container" >        <span>this is text</span>     </p>

    . container{            Text-align:center;                height:50px;                Background:green;                line-height:50px;            }

2. The element inside the container is display:block, and the element width is high known

In this case we use the Position property in conjunction with the set offset to implement. First, set the container's position:relative, set the element position to absolute, and then set the offset of the element (. inner-box) Top,left,margin-top,margin-left, where, top, Left is set to 50%, and the offset of the margin-top/margin-left is half the height/width of its own element, negative.

The code is as follows:

    <p class= "Container" >        <p class= "Inner-box" ></p>    </p>

    . container {                height:200px;                width:200px;                Background:pink;                position:relative;            }    . Inner-box {            position:absolute;             top:50%;             left:50%;             Margin-top: -50px;             Margin-left: -50px;             height:100px;             width:100px;             Background:green;         }

3. The element inside the container is display:block, and the element width is high unknown

This method is similar to method two, but the difference is that it cannot be achieved by setting the Margin-top/left offset, because the width and height of the elements inside the container are unknown. This time we set the left/top/bottom/right:0 by setting the Margin:auto.
The code is as follows:

    <p class= "Container" >        <p class= "Inner-box" ></p>    </p>

    . container {                height:200px;                    width:200px;                    Background:pink;                    position:relative;                }    . Inner-box {            position:absolute;               height:100px;               width:100px;               top:0;               right:0;               left:0;               bottom:0;               Margin:auto;               Background:green;           }

Something

There are several ways to center vertically horizontally, either by setting up translate, or by using flex layouts, but there are several ways to write them that are better compatible. If there is a shortage, welcome the big guy to point out.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!