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.

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.

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!