Detailed chart of advantages and disadvantages of css absolute positioning and centering technology

Absolute Centering Technology

We often use margin:0 auto to achieve horizontal centering, but we always think that margin:auto cannot achieve vertical centering... In fact, To achieve vertical centering, you only need to declare the element height and the following CSS:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Advantages:

1. Supports cross-browser, including IE8-IE10.

2. No need for other Special tags, less CSS code

3. Supports percentage% attribute value and min-/max-attribute

4. Only use this class to center any content block

5. It can be centered regardless of whether padding is set (without using the box-sizing attribute)

6. The content block can be redrawn.

7. Perfectly supports image centering.

Disadvantages:

1. The height must be declared (see Variable Height).

2. It is recommended to set overflow:auto to prevent content from overflowing out of bounds. (See Overflow).

3. Does not work on Windows Phone devices.

Browser compatibility:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Absolute positioning method works in the latest version of Chrome, Firefox, Safari, Mobile The test passed on Safari, IE8-10.

Comparison table:

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

##Negative Margins##NoScrollResizes but doesn't stay centeredNoNot responsive, margins must be calculated manually##NoYesExtra markup##FlexboxYes2. position:absolute causes the absolute positioning block to pop out When the content flow is disabled, the absolutely positioned part is not rendered when the rest of the content flow is rendered.

##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
All						##Transforms
##Modern & IE9+Yes	Scroll, can overflow container	Yes	Yes	Blurry rendering
##Table-Cell	##Modern & IE8+	Yes	Expands container
##Inline-Block##Modern, IE8+ & IE7*	Yes	Expands container	No	##Yes	##Requires container, hacky styles
##Modern & IE10+	##Scroll, can overflow container	Yes	##Yes	Requires container, vendor prefixes	Explanation:	Through the above description, AbsoluteCentering ) can be explained as follows: 1. In normal content flow (normal content flow), the effect of margin:auto is equivalent to margin-top:0;margin-bottom:0. W3C writes that if 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

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

3. Set top: 0; left: 0; bottom: 0; right: 0; for the block area; a bounding box will be reassigned to the browser. At this time, the block will Fills all available space of its parent element, which is usually the body or a container declared with 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 is positioned relative to).

4. Setting a height or width for the content block can prevent the content block from occupying all available space and prompt the browser to The new bounding box recalculates margin:auto

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

5. Since the content block is absolutely Positioning, out of the normal content flow, the browser will give the same value to margin-top and margin-bottom to center the element block within the previously defined boundaries.

W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

It seems that margin:auto was born for Absolute Centering (Absolute Centering), so Absolute Centering (Absolute Centering) Centering) should all be compatible with modern standards-compliant browsers.

In short (TL;DR): Absolutely positioned elements are not rendered in the normal content flow, so margin:auto can make the content pass top: 0; left: 0; bottom: 0; right: 0 ;Vertically centered within the set bounds.

The above is the detailed content of Detailed chart of advantages and disadvantages of css absolute positioning and centering technology. For more information, please follow other related articles on the PHP Chinese website!