The absolute centering technique of 8 kinds of CSS to achieve vertical center horizontal Center

1. Absolute centering (Absolute centering) technology

We often use margin:0 auto, to achieve horizontal center, and always think Margin:auto; not vertical center ... In fact, implementing vertical centering requires only declaring the element height and the following CSS:

. absolute-center {   margin:auto;   Position:absolute;           Left:  0; right:0;  Top:  0; bottom:0;}

Advantages:

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

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

3. Support percent% attribute value and Min-/max attribute;

4. Use only this class to achieve the center of any content block;

5. Whether or not the set padding can be centered (without using the box-sizing attribute);

6. Content blocks can be redrawn;

7. Perfect support for image centering.

Disadvantages:

1. Height must be declared (see variable height Variable);

2. Easy to set Overflow:auto, to prevent the content of the monthly overflow. (View overflow overflow)

3. Not working on Windows Phone devices

Browser compatibility:

Chrome,firefox,safari,mobile Safari,ie8-ie10,

The absolute positioning method is tested on the latest version of Chrome,firefox,safari,mobile Safari,ie8-ie10.

The absolute centering technique of 8 kinds of CSS to achieve vertical center horizontal Center