How do CSS center horizontally vertically? CSS horizontal vertically Centered method rollup

Go straight to the subject!

One, out of the center of the document flow element

Method One: Margin:auto method

CSS code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

HTML code:

1 2 3

<div> </div>

Effect Chart:

When an element is absolutely positioned, it is positioned according to 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

. 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 the/*height * * Margin-left: -240px; Half of the/*width * * }

HTML code:

1 2 3

<divclass= "Container" > <divclass= "inner" ></div> </div>

Effect Chart:

Here, we first use top:50% and left:50% to move the inner's coordinate origin (upper left) to the center of the container, and then use the negative margin to shift it to the left half of its width, and then to the higher half of its own, So the center of the Inner is aligned with the center point of the container.

Two, not detached from the document Flow Element Center

Method One: Table-cell method

CSS code:

1 2 3 4 5 6 7 8 9 Ten one

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

HTML code:

1 2 3

<div> </div>

Effect Chart:

The vertical-align:middle on the DIV is to control the vertical direction of the center, while the Text-align:center is to control the horizontal direction. An interesting fact is that when we remove the Vertical-align:middle of IMG, it's like this:

It's still centered! Are you 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:

1 2 3 4 5 6 7 8 9 Ten one

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

HTML code:

1 2 3

<div> <span> This is the text placed in span, with the outer div set Display:table-cell and vertical-align:middle to achieve vertical center. </span> </div>

Effect Chart:

This is what happens when we remove the vertical-align:middle of span:

See any difference? The line spacing of the text is even smaller. If you run your code on your own computer, you'll find that these lines are leaning toward 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

HTML code:

1 2 3 4 5

<divclass= "Container" > <divclass= "inner" > I center horizontally vertically in the container </div> </div>

Effect Chart:

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