Several methods of horizontal vertical center of CSS

One, the center method of leaving the document flow element one: Margin:auto method

CSS code:

div{      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:

<div>   <img src="mm.jpg"></div>

：

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 according to the outer Div.

Method Two: Negative margin method

CSS code:

. container{Width500px;Height400px;border: 2px solid  #379; position:relative; } .inner{width: 480px; Span class= "Hljs-attribute" >height: 380px; background-color:  #746; position:absolute; top:  50%; left:  50%; margin-top:-190px; /*height half */margin-left:- 240px; /*width Half */}            

HTML code:

class="container">    <div class="inner"></div></div>

：

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.

Two, not separated from the document Flow element Center method one: Table-cell method

CSS code:

div{    width: 300px;    height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center;}img{ vertical-align: middle;}

HTML code:

<div>    <img src="mm.jpg"></div>

：

The vertical-align:middle above the Div controls the center of the vertical direction, while the Text-align:center controls the horizontal direction. 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:

div{    border: 3px solid #555;    width: 300px; height: 200px; display: table-cell; vertical-align: middle; text-align: center;}span{ vertical-align: middle;}

HTML code:

<div>    <span>这是放在span中的文字，通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span></div>

：

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:

class="container">    <div class="inner">        我在容器中水平垂直居中    </div></div>

：

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:

This is a short halt!

Several methods of horizontal vertical center of CSS