Discuss the various centering methods in CSS

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

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:

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

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

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

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 div minus half the difference within the Div, 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 the parent-child Div:

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

Here we use the margin-top of the sub-div set to the parent div height minus half the height of the child Div, and then the bfc,less code that triggers the parent div by 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 set the margin to a negative value can also be horizontal vertical center Div, first of all, you need to define a parent-child div:

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

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 Div, and finally:

Text-align Center

As we all know, text-align can make the content in a div horizontally centered. But what if you want to center the sub-div in the div? The display of the sub Div 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 div, the div's 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:

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

. 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 div in the middle of the example above, the width of the div is fixed, but the actual project, it is possible to encounter the indefinite width of the Div, especially in response or mobile design, more common. So here is a div horizontal vertical centering method that does not require a fixed width.
First on the code:

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

. 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, the parent div of the div that needs to be centered, which is the width of the children, and then left:50%, aligns 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.

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

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.

The above is to discuss all kinds of CSS in the center of all the content, I hope you can like.

