Summary of methods to achieve centering using pure CSS

This article mainly introduces you to the seven major methods of using pure CSS to achieve centering, including line-height centering method, table-cell centering method, up, down, left and right positioning + margin centering method, 50% positioning + margin centering Method, 50% positioning + translate centering method, Flexbox centering method and Flexbox + margin centering method, friends in need can refer to and learn.

Preface

I remember one time when I was interviewing for a job, the interviewer asked a CSS question: How to make elements appear in the browser Center the top, bottom, left, and right in the browser window. I remember the answer I gave at the time was to first use JS to get the browser window height, then set line-height to the body as the window height and set text-align:center, and then set the element display:inline-block and vertical-align :middle. Sigh, I feel tired just thinking about it now.

Does it have to be JS? Isn't there a way to center an element using just CSS? The answer is, yes! And there’s more than one way!

1. Line-height centering method

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

Sub-element: display: inline-block; vertical-align: middle;

Note: 600px must be the height of the parent element. Another thing to note here is that font-size needs to be set to zero. If this attribute is not written, the element will not be accurately vertically centered. This method is the method I answered during the interview. The shortcomings are obvious. The height of the parent element must be determined. (Compatible with IE8+)

2. Table-cell centering method

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

Child elements: display: inline-block;

##Note: Compatible with IE8+

##3. Up, down, left, and right positioning + margin centering methodParent element:

position: relative ;

Sub-element:

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

Note: Compatible with IE8+

4. 50% positioning + margin centering methodParent element:

position: relative;

Child element:

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

Note: 200px must be half the width and height of the child element. For example, if the child element is 100px wide and 50px high, then the margin value is -25px 0 0 -50px. The disadvantage of this method is that the width and height of the child elements must be determined. (Compatible with IE8+)

5. 50% positioning + translate centering methodParent element:

position: relative;

Child elements:

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

Note: This method uses the CSS3 transform attribute and is suitable for mobile terminals. (Compatible with IE9+)

6. Flexbox centering methodParent element:

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

Note: This method uses Flexbox elastic layout, and there are also big problems with mobile compatibility. (Compatible with IE10+)

7. Flexbox+margin centering methodParent element:

display: flex;

Sub-element:

margin: auto;

Note: Same as above, compatible with IE10+

The above is the detailed content of Summary of methods to achieve centering using pure CSS. For more information, please follow other related articles on the PHP Chinese website!