Summary of the method of centering using pure CSS

This article mainly introduces you to the use of pure CSS to achieve the center of the seven methods, including Line-height Center method, Table-cell center method, the upper and lower left and right positioning +margin Center method, 50% positioning +margin Center method, 50% positioning + Translate Center method, Flexbox center method and Flexbox+margin Center method, the need of friends can refer to learning.

Objective

Remember when looking for a job interview, an interviewer asked a CSS question: How to let the elements in the browser window up or down center. I remember the answer was to get the browser window height with JS, then set the body line-height to the window height and set the Text-align:center, and then set the element display: Inline-block and Vertical-align:middle. Alas, now think oneself all feel tired.

Do you have to use JS? Can't there be a way to center elements in a CSS-only way? The answer is, there! And there are more ways than one!

First, Line-height Center method

Parent element:text-align: center; line-height:600px; font-size: 0;

Child elements:display: inline-block; vertical-align: middle;

Note:600px must be the height of the parent element, it is also important to note that Font-size should be set to zero, if the property is not written, it will cause the element not to be precisely vertically centered. This method is the method I answered during the interview, the disadvantage is obvious, the parent element height must be determined. (Compatible with ie8+)

Second, Table-cell Center method

Parent element:display: table-cell; text-align: center; vertical-align: middle;

Child elements:display: inline-block;

Note: compatible with ie8+

Three, upper and lower left and right positioning +margin Center method

Parent element:position: relative;

Child elements:position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

Note: compatible with ie8+

Four, 50% positioning +margin centering method

Parent element:position: relative;

Child elements:position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px;

Note:200px shall be half the width of the child element. For example, the child element has a width of 100px and a height of 50px, then the margin value is -25px 0 0-50px. The disadvantage of this method is that it is necessary to determine the height of child elements. (Compatible with ie8+)

Five, 50% positioning +translate centering method

Parent element:position: relative;

Child elements:position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

Note: This method uses the CSS3 transform property, which is suitable for use on the mobile side. (Compatible with ie9+)

Six, Flexbox Center method

Parent element:display: flex; justify-content: center; align-items: center;

Note: This method uses the Flexbox elastic layout, and there is a big problem with mobile compatibility. (Compatible with ie10+)

Seven, Flexbox+margin Center method

Parent element:display: flex;

Child elements: margin: auto;

Note: Ditto, compatible with ie10+