Completely utilize CSS to center elements

This time I will bring you the complete use of CSS to center elements, and what are the things to note. The following is a practical case, let's take a look.

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<a href="http://www.php.cn/wiki/807.html" target="_blank">: 0;</a>

Child elements:

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 method

Parent element:

position

: relative;<a href="http://www.php.cn/wiki/902.html" target="_blank"></a>Child elements: position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

##Note:

Compatible with IE8+##4. 50% positioning + margin centering method

Parent 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 method

Parent element: position: relative;

Child element:

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 method

Parent 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 method

Parent element: display: flex;

Sub-element:

margin: auto;

##I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of focus-within

Detailed explanation of the use of pseudo-elements::before and::after

How the font-size-adjust attribute optimizes web page layout

The above is the detailed content of Completely utilize CSS to center elements. For more information, please follow other related articles on the PHP Chinese website!