Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the ways for CSS to achieve horizontal and vertical center". In daily operation, I believe that many people have doubts about the way CSS achieves horizontal and vertical centering. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for everyone to answer the question of "what is the way for CSS to achieve horizontal and vertical centring?" Next, please follow the editor to study!

Highlight, this is a required interview question, many interviewers like to ask this question, I have been asked several times.

To achieve the effect of the above picture seems to be very simple, but in fact hidden mystery, this article summarizes the ways to achieve horizontal and vertical center of CSS probably have the following, this article will introduce one by one, I will organize this article into a github warehouse, welcome to star.

Only the center element is suitable for fixed width and height.

Absolute + negative margin

Absolute + margin auto

Absolute + calc

Center element with variable width and height

Absolute + transform

Lineheight

Writing-mode

Table

Css-table

Flex

Grid

Absolute + negative margin

To achieve the above effect, let's first do some preparatory work, assuming that the HTML code is as follows, with a total of two elements, the parent element and the child element

123123

Wp is the class name of the parent element, and box is the class name of the child element. Because of the difference between fixed width and variable width, size is used to indicate the specified width. The following is the common code used for all effects, mainly setting color and width and height.

Note: this common code will not be repeated later, only the corresponding prompt will be given.

/ * Common Code * / .wp {border: 1px solid red; width: 300px; height: 300px;} .box {background: green;} .box.size {width: 100px; height: 100px;} / * Public Code * /

The percentage of absolute positioning is relative to the width and height of the parent element, through this feature, the child element can be centered, but the absolute positioning is based on the upper left corner of the child element, and the desired effect is the center display of the child element.

To correct this problem, you can use the negative value of the outer margin, which allows the element to be positioned in the opposite direction. By specifying that the outer margin of the child element is a negative value of half the width of the child element, you can center the child element. The css code is as follows

/ * the above common code is referenced here * / / * the above common code * / / * location code * / .wp {position: relative;} .box {position: absolute;; top: 50%; left: 50%; margin-left:-50px; margin-top:-50px;}

This is my more common way, which is easy to understand and compatible, but the disadvantage is that I need to know the width and height of the child elements.

Click to view the full DEMO

Absolute + margin auto

This approach also requires that the width and height of the centered element must be fixed. The HTML code is as follows

123123

In this way, by setting the distance in all directions to 0, if margin is set to auto, you can center in all directions.

/ * the public code above is referenced here * / / * the common code above * / / * location code * / .wp {position: relative;} .box {position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

This method is also very compatible, but the disadvantage is that you need to know the width and height of the child elements.

Click to view the full DEMO

Absolute + calc

This approach also requires that the width and height of the centered element must be fixed, so we add the size class to box. The HTML code is as follows

123123

Thanks to css3 for bringing the calculation attribute, since the percentage of top is based on the upper left corner of the element, you can subtract half of the width. The code is as follows

/ * the above common code is referenced here * / / * the above common code * / / * location code * / .wp {position: relative;} .box {position: absolute;; top: calc (50%-50px); left: calc (50%-50px);}

The compatibility of this method depends on the compatibility of calc, but the disadvantage is that you need to know the width and height of the child elements.

Click to view the full DEMO

Absolute + transform

It is still absolutely positioned, but this method does not require a fixed width and height of child elements, so the size class is no longer needed. The HTML code is as follows

123123

To fix the problem of absolute positioning, you can also use the translate property of transform,transform added by css3 to set the percentage, which is relative to its width and height, so it can be said that the translate is set to-50%, and the center can be achieved. The code is as follows

/ * the above common code is referenced here * / / * the above common code * / / * location code * / .wp {position: relative;} .box {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%);}

The compatibility of this method depends on the compatibility of translate2d

Click to view the full DEMO

Lineheight

Horizontal and vertical centering can also be achieved by using the inline element center attribute. The HTML code is as follows

123123

By setting box as an inline element, you can center horizontally through text-align, but many students may not know that you can also center vertically through vertical-align. The code is as follows

/ * the above common code is referenced here * / / * the above common code * / / * location code * / .wp {line-height: 300px; text-align: center; font-size: 0px;} .box {font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left / * revised text * /}

This method requires the text display to be reset to the desired effect in the child element.

Click to view the full DEMO

Writing-mode

Many students must be as ignorant of writing-mode attributes as I am. Thank you @ Zhang Xinxu for your feedback. To put it simply, writing-mode can change the display direction of text. For example, you can make the display of text vertical through writing-mode.

Horizontal direction and vertical direction .div2 {writing-mode: vertical-lr;}

The display effect is as follows:

Horizontal vertical direction

What's even more amazing is that all the css attributes in the horizontal direction will become vertical attributes, such as text-align, which can be centered horizontally and vertically through writing-mode and text-align, but with a little bit of trouble.

123123 / * the above common code is referenced here * / / * the above common code * / / * location code * / .wp {writing-mode: vertical-lr; text-align: center;}. Wp-inner {writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;} .box {display: inline-block Margin: auto; text-align: left;}

This method is a little complicated to implement and understand.

Click to view the full DEMO

Table

Table used to be used for page layout, but no one does it now, but table can also center horizontally and vertically, but it will add a lot of redundant code

123123

The content in the tabel cell is naturally centered vertically, as long as you add a horizontal center attribute

.wp {text-align: center;} .box {display: inline-block;}

This method is that the code is too redundant and is not the correct use of table.

Click to view the full DEMO

Css-table

The new table attribute of css allows us to turn ordinary elements into the reality of table elements, and through this feature we can also achieve horizontal and vertical centering.

123123

Below, through the css property, you can make div display the same as table

.wp {display: table-cell; text-align: center; vertical-align: middle;} .box {display: inline-block;}

This method has the same principle as table, but it doesn't have as much redundant code and compatibility is good.

Click to view the full DEMO

Flex

As a modern layout scheme, flex subverts the past experience and can be elegantly centered horizontally and vertically with only a few lines of code.

123123 .wp {display: flex; justify-content: center; align-items: center;}

At present, flex can be used on the mobile side, and the PC side needs to depend on the compatibility of its own business.

Click to view the full DEMO

Grid

Thanks to @ Sister @ for feedback on this scheme, css's new grid layout has not paid much attention because of its poor compatibility. Horizontal and vertical centering can also be achieved through grid.

.wp {display: flex; justify-content: center; align-items: center;}. Wp {display: grid;} .box {align-self: center; justify-self: center;}

The amount of code is also very small, but the compatibility is not as good as flex, so it is not recommended to use it.

At this point, the study on "what are the ways for CSS to achieve horizontal and vertical center" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.