CSS center Summary

CSS center Summary

Today I will talk about various center methods in CSS.
The first is horizontal center. The simplest way is

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:

Liu Fang

Set line-height to the same height:

. Wrap {line-height: 200px;/* center vertical key */text-align: center; height: 200px; font-size: 36px; background-color: # ccc ;}

The effect is as follows:

Demo

Padding Filling

Use padding and background-clip to realize horizontal vertical center of div:

 

Set backgroun-clip to content-box, crop the background to the outer edge of the content area, and set padding to the outer div minus the difference of the inner div 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:

Demo

Margin Filling

Next we will introduce the margin filling method to achieve horizontal vertical center.
First, we define the Parent and Child div:

 

Here we set the margin-top of the sub-div to the height of the parent div minus the half of the height of the sub-div, and then set overflow to hidden to trigger the BFC of the parent div. 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:

Demo

Absolute locating

Use position: absolute with top, left 50%, and set margin to a negative value. You can also vertically center the div. First, you need to define the Parent and Child div:

 

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 the margin is half the width of the div, and finally:

Demo

Center text-align

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

Demo

Center Image

Generally, the image center is the same as text-align. Wrap the image in a div and set text-align of the div 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:

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

Demo

Transform Center

In the example of div center mentioned above, the width of the div is fixed. However, in actual projects, there may be divs with an indefinite width, especially in responsive or mobile design, more common. Therefore, the following describes a div vertical center method that does not require a fixed width.
First run the Code:

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 div of the div 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.

Demo

Flex Center

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

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:

The browser will certainly be compatible.