Horizontal, vertical center, is often used in CSS, but also interview questions, there are many ways to center, today an article, completely said, said through!
For example, to achieve the following effect: QQ group 786276452 CSS horizontal, vertical center, N methods, completely said!
Absolute + negative margin (this method is easy to understand, compatibility OK, the disadvantage is that you need to know the width and height of the child element)
1, PC side compatibility requirements, width and height fixed, recommended absolute + negative margin
2. Css-table is recommended because the PC is compatible with different width and height
3. The PC does not have compatibility requirements. Flex is recommended
4. Flex is recommended for mobile applications
Conclusion 2: Compatibility
methods
Center element Fixed width and height Fixed PC compatibility Mobile compatibility
1) Absolute + negative margin
Ie6 +, chrome4+, firefox2+ android 2.3+, iOS6+absolute + margin auto is ie6+, chrome4+, firefox2+ android 2.3+, iOS6+
2) Absolute + calc
Ie9 +, chrome19+, firefox4+ android 4.4+, iOS6+
3) Absolute + transform
Ie9 +, chrome4+, firefox3.5+ android 3+, iOS6+
4) the lineheight
Ie6 +, chrome4+, firefox2+ android 2.3+, iOS6+
5) CSS – table
Ie8 +, chrome4+, firefox2+ android 2.3+, iOS6+
6) flex
Ie10 +, chrome4+, firefox2+ android 2.3+, iOS6+