Discuss all kinds of centering methods in CSS _css/html

Today we talk about all kinds of centering methods in CSS.
The first is horizontally centered , and the simplest way is, of course,

Copy 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 one by one ways to:

Line-height

First, introduce the horizontal centering method of text:

Copy Code code as follows:

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

The use of Line-height is set to the same height:

Copy 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 padding

The horizontal vertical center of the div is implemented with padding and background-clip:

Copy Code code as follows:

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

By Backgroun-clip set to Content-box, the background is cropped to the outside of the content area, and then the padding is set to the outer div minus half the difference of the inner div to achieve:

. parent{
 margin:0 Auto;
 width:200px;
 height:200px;
 Background-color:red
}
. Children {
 width:100px;
 height:100px;
 padding:50px;
 Background-color:black;
 The key to background-clip:content-box;/* center

The effect is as follows:

Margin padding

The next step is to introduce margin padding to achieve horizontal vertical centering.
First we define the parent-child Div:

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

Here we use the margin-top of the child div 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;/* triggers 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 margin to a negative value, you can center the div horizontally vertically, or you need to define the parent-child Div First:

Copy Code code as follows:

<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 div's width, and the final effect is:

Text-align Center

As we all know, text-align can make the contents of a div horizontally centered. But what if you want to center the child div in that div? You can set the display of the child div 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

General Image Center is the same as text-align, the picture wrapped in a div, the Div text-align set to center can be.
You can refer to the following links:
Personal site

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

Copy Code code 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

In the example of the div centered above, the width of the div is fixed, but in the actual project, it is possible to encounter a wide range of Div, especially the design of the response or mobile end, more common. So here's a description of a div horizontal vertical centering method that doesn't require a fixed width.
First code:

Copy Code code as follows:

<div class= "Parent" >
<div class= "Children" >
<div class= "Children-inline" > I am horizontally vertically centered 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 to shrink the width of the parent div of the div that needs to be centered, which is children, and then left:50% to align the left side of the children with the horizontal centerline. This time, not really centered, we need to move the Children-inner left-50%, so that the horizontal center.
To say the vertical direction, first set the top of the children to 50%, and then align it with the vertical centerline, and 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 easy to use OH.

Flex Center

Finally, introduce the Display:flex in CSS3 to achieve the horizontal vertical centering method.

Copy Code code as follows:

<div class= "Parent" >
<div class= "Children" > I was centered horizontally vertically 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, is not compatible, but with the advance of time, the major browsers will be compatible.

The above is the entire content of this article, I hope you can enjoy.