Various types of center methods in CSS _ CSS/HTML

This article introduces various center methods in CSS. The implementation methods of the eight methods are described in detail, and corresponding, for more information about how to center CSS, see the following section.
First Horizontal CenterThe simplest way is, of course

The Code is as follows:

Margin: 0 auto;

That is, set the margin-left and margin-right attributes to auto to achieve the effect of horizontal center.

What about other methods? Let me say one by one:

Line-height

First, we will introduce the horizontal center Method of text:

The Code is as follows:

Liu Fang

Set line-height to the same height:

The Code is 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 Filling

Use padding and background-clip to align p horizontally and vertically:

The Code is as follows:

Set backgroun-clip to content-box, crop the background to the outer edge of the content area, and set padding to the outer p minus the difference of the inner p to half:

. 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 Filling

Next we will introduce the margin filling method to achieve horizontal vertical center.
First, we define parent and child p:

Here we set the margin-top of the child p to the height of the parent p minus the half of the height of the child p, and then set overflow to hidden to trigger the BFC of the parent p. The LESS code 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 ;}

The center effect is as follows:

Absolute locating

Position: absolute is used together with top, left 50%. If you set margin to a negative value, you can center p horizontally and vertically. First, you need to define parent and child p:

The Code is as follows:

Then set the corresponding 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 margin is half of the p width. Finally:

Center text-align

As we all know, text-align can center the content of a p horizontally. But what if we want to center the subp in the p? You can set the display of the child p 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 the parent element text-align take effect */}

Center Image

Generally, the center of an image is the same as text-align. Wrap the image in a p and set text-align of the p to center.
You can refer to the following link:
Personal site

There is a special way to use an image for placeholder, so that the parent container gets a high width, so that the image with a-50% offset can have a reference container for percentage calculation. The advantage is that you do not know the size of the image. You can center any image that has no larger size than the size of the parent container. In addition, IE6 is compatible with each other. The Code is as follows:

The Code is as follows:

.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 center p mentioned above, the width of p is fixed. However, in actual projects, it is possible to encounter a variable width p, especially in responsive or mobile design, more common. Therefore, the following describes a vertical center Method of p without a fixed width.
First run the Code:

The Code is as follows:

I am centered horizontally and vertically!

.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 contract the parent p of the p to be centered, that is, the width of children, and left: 50% to align the left and horizontal midline of children. At this time, the center is not really centered. We need to move the children-inner left-50% so that the center is horizontally centered.
Let's talk about the vertical direction. First, set the top of children to 50%, and then align it with the vertical midline. Similarly, we need to move the children-inner to-50%. But this 50% is not calculated, so we use transform: translate3d (0,-50%, 0 );
This method is very useful.

Flex Center

Finally, we will introduce the horizontal vertical center method implemented by display: flex in CSS3.

The Code is as follows:

I am centered horizontally and vertically through flex!

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 method is the easiest, that is, poor compatibility. However, as time goes forward, all major browsers will be compatible.

The above is all the content of this article, and I hope you will like it.