How CSS properties implement various center fill code details

First, Center Horizontally , the simplest way is, of course.

margin:0 Auto;

That is, the Margin-left and Margin-right properties are set to auto to achieve a horizontal center effect.

So what's the other way?

Line-height

First introduce the horizontal centering method of text:

<p class= "wrap" > Liufang </p>

You can use the Line-height set to height:

. wrap{  line-height:200px;/* Vertical Centering Key */  Text-align:center;   height:200px;  font-size:36px;  Background-color: #ccc;}

The effect is as follows:

padding fill

Use padding and background-clip mates to achieve horizontal vertical centering of P:

<p class= "Parent" >  <p class= "Children" ></p></p>

The Backgroun-clip is set to Content-box, the background is clipped to the outside of the content area, and the padding is set to the outer p minus half the difference of the inner p to achieve:

. parent{margin:0 Auto; width:200px; height:200px; background-color:red;}. Children {width:100px; height:100px; padding:50px; background-color:black; background-clip:content-box;/* Center Key */

The effect is as follows:

Margin fill

The margin fill is then introduced in a way that allows horizontal vertical centering.
First we still define parent-child p:

<p class= "Parent" >  <p class= "Children" ></p></p>

Here we use the margin-top of the child p to be set to the parent p height minus half the child p height, and then the bfc,less code that triggers the parent p with overflow set to hidden is as follows:

@parentWidth: 200px; @childrenWidth: 50px;. Parent {margin:0 auto; height: @parentWidth; width: @parentWidth; background:red; overflow:hidden;/* Trigger Bfc*/}.children { Height: @childrenWidth; Width: @childrenWidth; Margin-left:auto; Margin-right:auto; Margin-top: (@parentWidth-@childrenWidth)/2; Background:black;}

Finally get the center effect as follows:

Absolute positioning

Using Position:absolute with Top,left 50%, and then setting the margin to a negative value can also be horizontal vertical center p, first of all you need to define parent-child p:

<p class= "Parent" >  <p class= "Children" ></p></p>

Then set the appropriate CSS:

. parent {position:relative; margin:0 auto; width:200px; height:200px; background-color:red;}. Children {Position:absolute;  left:50%;  top:50%;  margin:-25px 0 0-25px; height:50px; width:50px; Background-color:black;}

The value in the margin is half the width of the p, and finally:

Text-align Center

As is known to all, text-align can make content in one P horizontally centered. But what if you want to center the Sub p in the p? The display of the child p can be set to Inline-block.

. parent {text-align:center; margin:0 auto; width:200px; height:200px; background:red;}. Children {positiona;absolute; margin-top:75px; width:50px; height:50px; background:black; display:inline-block;/* Make its parent element text-align effective */}

Flex Center

Finally, we introduce the method of horizontal vertical centering of Display:flex in CSS3.

<p class= "Parent" >  <p class= "Children" > I am horizontally vertically centered through flex Oh! </p></p>

html,body{width:100%; height:200px;}. parent {Display:flex; align-items:center;/* Vertical Center */justify-content:center;/* Horizontal Center */width:100%; height:100%; background-color:red;}. Children {Background-color:blue;}

The effect is as follows: