Summary of the centering method in CSS

This article introduced the CSS in the various types of centering, 8 ways to implement the method explained in detail, but also with the corresponding, the need for friends can refer to the next

Today, I would mainly talk about the various centering methods in CSS.
The first is the horizontal center , the simplest way of course is

Copy the Code code as follows:

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? Allow me to one by one:

Line-height

First introduce the horizontal centering method of text:

Copy the Code code as follows:

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

You can use the Line-height set to height:

Copy the Code code as follows:

. wrap{
line-height:200px;/* Vertical Center 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:

Copy the Code code as follows:

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

Copy the Code code as follows:

<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 */}

Center picture

The general Picture Center is the same as text-align, the picture is wrapped in a p, the P text-align is set to center.
You can refer to the following links:
Personal site

In a special way, a picture is used to occupy a position so that the parent container gets a high width, so that a picture with a 50% offset can have a reference container as a percentage. The advantage is that you can not know the size of the picture, casually put a size does not exceed the parent container of the picture can be done in the center. In addition, compatibility is good, IE6 can be smoothly compatible. The code is as follows:

Copy the Code code as follows:

<p class= "Parent" >
<p>

</p>
</p>

. parent {position:relative; width:100%; height:200px; background:red;} p {position:absolute; top:50%; left:50%;}. hidden-img {Visibility:hidden;}. show-img {position:absolute; right:50%; bottom:50%;}

The effect is as follows:

Transform Center

The P-centered example above is fixed in the width of p, but in actual projects it is possible to encounter an indeterminate p, especially in the design of a responsive or mobile end. So here is a horizontal vertical centering method that does not require a fixed width.
First on the code:

Copy the Code code as follows:

<p class= "Parent" >
<p class= "Children" >
<p class= "Children-inline" > I am horizontal vertical Center Oh! </p>
</p>
</p>

. parent {float:left; width:100%; height:200px; background-color:red;}. Children {float:left; position:relative; top:50%; left:50%;}. children-inline {position:relative; left: -50%;-webkit-transform:translate3d (0, -50%, 0); Transform:translate3d (0, -50%, 0); Background-color:black; Color:white;}

The effect is as follows:

First we use float to shrink the width of the parent p, which is the children of P, which needs to be centered, and then left:50% to align the left side of the children with the horizontal midline. This time, not really centered, we need to move the Children-inner left-50%, so that the horizontal center.
In the vertical direction, the top of the children is set to 50%, then the top and the vertical midline are aligned, again, we need to move the Children-inner 50%. But this 50% is not calculated, so we use the Transform:translate3d (0,-50%, 0);
This method is very useful.

Flex Center

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

Copy the Code code as follows:

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

This is the easiest way to be compatible, but with time, the big browsers are bound to be.