CSS to implement positioning elements in the center of the method

Center implementation of absolutely positioned elements

If you want to ask how CSS to achieve the absolute positioning elements of the center effect, many people have the answer in mind.

The mainstream usage of good compatibility is:

CSS code copy content to clipboard

. element {

width:600px; height:400px;

Position:absolute; left:50%; top:50%;

Margin-top: -200px; /* Height of half * *

Margin-left: -300px; /* Width of half * *

}

However, this method has a very obvious shortcoming, that is, the need to know the size of the elements in advance. Otherwise, margin negative adjustments cannot be accurate. At this point, often to use JS to obtain.

The rise of CSS3 has led to a better solution, which is to use transform instead of margin. The percentage value of the translate offset in the transform is relative to its own size, so we can:

CSS code copy content to clipboard

. element {

width:600px; height:400px;

Position:absolute; left:50%; top:50%;

Transform:translate (-50%,-50%),/* 50% is half of its own size * *

}

Thus, regardless of the size of an absolutely positioned element, it is centered horizontally vertically.

However, the problem is obvious, the compatibility is not good. ie10+ and other modern browsers support it. It is not appropriate to ignore the IE8 browsers that are prevalent in China (mobile Web development can be ignored).

In fact, there is another way to center an absolute positioning element, which is to weigh the size adaptation and compatibility of the above, and the core of its implementation is margin:auto.

Margin:auto implements the center of an absolutely positioned element

First, let's look at the CSS code:

CSS code copy content to clipboard

. element {

width:600px; height:400px;

Position:absolute; left:0; top:0; rightright:0; bottombottom:0;

Margin:auto; * * With this will automatically center.

}

Code two key points:

Up and down 0 position positioning;

Margin:auto

So, it's centered. The width:600px height:400px of the above code is just a schematic, you modify it to another dimension, or you do not set a dimension (you need to be a picture of the element that itself contains dimensions), are centered. Very interesting ~ ~

You can ruthlessly click here: Margin:auto and absolute positioning elements of the vertical center demo