Several methods of horizontal vertical center of CSS

Go directly to the theme!

First, from the center of the document flow element

Method One: Margin:auto method

CSS code:

p{      width:400px;      height:400px;      position:relative;      border:1px solid #465468; } img{      Position:absolute;      Margin:auto;      top:0;      left:0;      right:0;      bottom:0; }

HTML code:

<p>   </p>

：

When an element is absolutely positioned, it is positioned based on the first ancestor element that is not a static location, so the IMG here is positioned based on the outer p.

Method Two: Negative margin method

CSS code:

. container{      width:500px;      height:400px;      border:2px solid #379;      position:relative; }. inner{      width:480px;      height:380px;      Background-color: #746;      Position:absolute;      top:50%;      left:50%;      Margin-top: -190px; Half of/*height *      /margin-left: -240px; half of/*width * *}

HTML code:

<p class= "Container" >    <p class= "inner" ></p></p>

：

Here, we first use top:50% and left:50% to let the inner coordinate origin (upper left) move to the center of the container, and then use the negative margin to leave it to the left offset by half of its width, and then upward offset by half of its height, So the center point of the Inner is aligned with the center point of the container.

Second, not separated from the center of the document flow element

Method One: Table-cell method

CSS code:

p{    width:300px;    height:300px;    border:3px solid #555;    Display:table-cell;    Vertical-align:middle;    Text-align:center;} img{    Vertical-align:middle;}

HTML code:

<p>    </p>

：

P above the Vertical-align:middle is to control the vertical direction of the center, while the text-align:center is the horizontal direction of control. An interesting fact is that when we remove IMG Vertical-align:middle, it is:

It's still centered! Is it really centered?

As we can see, the picture moves up a bit and is not centered in the vertical direction. Why? I don't know why, if you know, can you tell me?

But if we change the picture to text:

CSS code:

p{    border:3px solid #555;    width:300px;    height:200px;    Display:table-cell;    Vertical-align:middle;    Text-align:center;} span{    Vertical-align:middle;}

HTML code:

<p>    <span> This is the text placed in span, which is vertically centered through the outer p setting Display:table-cell and the Vertical-align:middle. </span></p>

：

When we remove the vertical-align:middle of span, this is the case:

See any differences? The line spacing of the text is even smaller. If you run the code on your computer, you'll find that the lines are in the middle and not moving up like a picture. I'm also trying to figure out what's going on, and if you know why, please tell me.

Method Two: Elastic box method

CSS code:

. container{      width:300px;      height:200px;      border:3px solid #546461;      Display:-webkit-flex;      Display:flex;      -webkit-align-items:center;      Align-items:center;      -webkit-justify-content:center;      Justify-content:center; }. inner{      border:3px solid #458761;      padding:20px; }

HTML code:

<p class= "Container" >    <p class= "inner" >        I center horizontally vertically in the container    </p></p>

：

The Align-items controls the center of the vertical direction, and the justify-content controls the horizontal orientation. This is a new way of CSS3, browser support is as follows:

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.