How to do the centering effect in CSS

We all know margin:0 auto; Style allows the element to be centered horizontally while margin:auto; But not vertically centered ... Until now. However, please note! To make the element absolutely centered, just declare the height of the element and append the following styles to do it:

. absolute-center {  margin:auto;  Position:absolute;  top:0; left:0; bottom:0; right:0;}

I'm not the first person to find out about this approach (but I dare call it "fully centered"), which can be a very common technique. But most of the articles that introduce vertical centering do not mention this approach.

I've never used this method before, and I want to try and see how amazing this "completely centered" approach is. Benefits:

• Cross-browser, good compatibility (no hack, can take into account Ie8~ie10)

• No special markings, more streamlined style

• Adaptive layouts that use styles such as percentages and maximum minimum aspect

• The padding value of the element is not considered when centered (nor does it need to use the box-sizing style)

• Layout blocks can be freely resized

• An IMG image can also be used

Also note:

• Element height must be declared

• recommended settings Overflow:auto; style to avoid overflow of elements, showing abnormal problems

• This method does not work on the Windows Phone

Browser support: Chrome, Firefox, Safari, Mobile Safari, ie8-10. "Fully centered" tested to be perfectly applied to the latest versions of Chrome, Firefox, Safari, Mobile Safari, or even on ie8~ie10

Table

"Full centering" is not the only option in this article. To achieve vertical centering, there are other methods, each with its strengths. What to do depends on the browser you support and the structure of the existing tag. The following table will help you choose the method that best suits your needs.

Description

After studying the specifications and documentation, I summed up how "full centering" works:

1. In the normal document flow, Margin:auto; It means that the margin-top and margin-bottom of the set element are 0.

W3.org:?if ' margin-top ', or ' margin-bottom ' was ' auto ', their used value is 0.

2. Set the Position:absolute; Element becomes a block element and is detached from the normal document flow. The rest of the document is rendered as usual, and the elements do not appear to be in the same position. Developer.mozilla.org:?... an element which is positioned absolutely is taken out of the flow and thus takes up no space

3. Set the top:0; left:0; bottom:0; right:0; The block element of a style allows the browser to wrap a new box around it, so that the element fills its inner space relative to the parent element, which can be either a body tag or a set of position:relative; The container for the style. Developer.mozilla.org:? For absolutely positioned elements, "top", "right", "bottom" and "left" properties specify offsets from the edge of the Eleme NT ' s containing block (what's the element is positioned relative to).

4. When the element is set to a wide height, the browser blocks the element from filling up all the space, according to Margin:auto; requirements, recalculate, and wrap a new box. Developer.mozilla.org:?the margin of the [absolutely positioned] element is then positioned inside these offsets.

5. Since the block element is absolutely positioned and is out of normal document flow, the browser sets an equal value for Margin-top and margin-bottom before wrapping the box. W3.org:? If none of the three [top, bottom, height] is ' auto ': If both ' margin-top ' and ' margin-bottom ' is ' auto ', solve the Equa tion under the extra constraint that the both margins get equal values.? Aka:center The block vertically

Use "Full Center", intentionally follow the standard margin:auto; Style rendering, so it should work in a variety of browsers that are compatible with the standard.

