Completely utilize CSS to center elements-CSS Tutorial-php.cn

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-heightto the body as the window height and settext-align:center, and then Set the element display:inline-block andvertical-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;

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;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!