CSS absolute positioning centering technology advantages and disadvantages chart

Absolute Positioning centering (Absolute centering) technology

We often use margin:0 auto to achieve horizontal centering, and always think that margin:auto can not be vertically centered ... In fact, implementing vertical centering requires only declaring the element height and the following CSS:

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

Advantages:

1. Support cross-browser, including Ie8-ie10.

2. No additional special tags are required, the amount of CSS code is small

3. Support Percent% property value and min-/max-property

4. Only use this class to achieve any content block centering

5. Can be centered regardless of whether the setting padding (without using the Box-sizing property)

6. Content blocks can be redrawn.

7. Perfect support for image centering.

Disadvantages:

1. Height must be declared (view variable height variable height).

2. It is recommended to set Overflow:auto to prevent content overrun. (View overflow overflow).

3. Does not work on Windows Phone devices.

Browser compatibility:

Chrome,firefox, Safari, Mobile Safari, ie8-10.

The absolute positioning method is tested on the latest version of Chrome,firefox, Safari, Mobile Safari, ie8-10.

Comparison table:

The absolute centering method is not the only way to achieve vertical centering, there are some other methods, and each has its own advantages. Which technology to use depends on whether your browser supports it and the language tags you use. This comparison chart will help you make the right choice according to your needs.

Technique	Browser Support	Responsive	Overflow	Resize:both	Variable Height	Major Caveats
absolute centering	modern & ie8+	yes	scroll, can overflow container	yes	yes*	variable Height not Perfect Cross-browser
negative Margins	< Span style= "FONT-SIZE:18PX; Color: #444444 ">all	No	scroll	resizes but doesn ' t stay Centered	no	not responsive, margins must Be calculated manually
transforms	modern & ie9+	yes	Scroll, can overflow container	yes	yes	blurry rendering
table-cell	modern & ie8+	yes	Expands container	no	yes	extra markup
inline-block	modern, ie8+ & ie7*	yes	Expands container	no	yes	requires container, hacky styles
Flexbox	Modern & ie10+	Yes	Scroll, can overflow container	Yes	Yes	Requires container, vendor prefixes

Explain:

Through the above description, the Absolute Center (absolutecentering) working mechanism can be elaborated as follows:

1. In normal content flow, the Margin:auto effect is equivalent to margin-top:0;margin-bottom:0.

The authors write if ' margin-top ', or ' margin-bottom ' is ' auto ', and their used value is 0.

2, Position:absolute the absolute positioning block out of the content stream, the rest of the content stream rendering when the absolute positioning part is not rendered.

developer.mozilla.org:...an element, positioned absolutely is taken out of the flow and thustakes up no space

3, set top:0 for block area; left:0; bottom:0; right:0; a bounding box will be reassigned to the browser, at which point the block will populate all the free space for its parent element, which is usually the body or container declared as position:relative.

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from The edge of the element ' s containing block (what Theelement was positioned relative to).

4, set a height or width of the content block, to prevent the content block occupy all the free space, prompting the browser to recalculate the new bounding box Margin:auto

Developer.mozilla.org:The margin of the[absolutely positioned] element is then positioned inside these offsets.

5, because the content block is absolutely positioned, out of the normal content stream, the browser will give Margin-top,margin-bottom the same value, so that the element block in the previously defined boundary within the center.

W3.org:If none of the three [top, bottom,height] is ' auto ': If both ' margin-top ' and ' margin-bottom ' is ' auto ', Solveth E equation under the extra constraint that the both margins get equal values. Aka:center The block vertically

In this way, Margin:auto seems to have been designed for absolute centering (Absolute centering), so absolute centering (Absolute centering) should be compatible with standard modern browsers.

In short (TL;DR): The absolute positioning element is not rendered in the normal content stream, so margin:auto can make the content pass through the top:0; left:0; bottom:0;right:0 the vertical center within the set boundary.