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

Editor to share with you how to use CSS to achieve horizontal vertical center, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

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

Absolute+ negative margin

Absolute+marginauto

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:1pxsolidred

Width:300px

Height:300px

}

.box {

Background:green

}

.box.size {

Width:100px

Height:100px

}

/ * Common 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 is referenced here * /

/ * 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+marginauto

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 above common code is referenced here * /

/ * the above common code is referenced here * /

/ * 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 is referenced here * /

/ * 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 is referenced here * /

/ * location code * /

.wp {

Position:relative

}

.box {

Position:absolute

Top:50%

Left:50%

Transform:translate (- 50% Mo Mo 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 is referenced here * /

/ * 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;/* correction 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

Vertical direction

.div2 {

Writing-mode:vertical-lr

}

The display effect is as follows:

Horizontal direction

Droop

Straight

Square

To

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 is referenced here * /

/ * 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 p 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.

123123

.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.

Click to view the full DEMO

Summary

The following is a comparison of the advantages and disadvantages of various ways. It is definitely time for a classmate to write back words. Let's briefly sum up.

PC end has compatibility requirements, fixed width and height. Absolute+ negative margin is recommended.

PC end has compatibility requirements, width and height are not fixed. Css-table is recommended.

There is no compatibility requirement on PC. Flex is recommended.

Flex is recommended for mobile devices.

Tips:

Method centered element fixed width and height fixed PC compatibility Mobile compatibility

Absolute+ negative margin is ie6+,chrome4+,firefox2+ Android 2.3pm iOS6 +

Absolute+marginauto is ie6+,chrome4+,firefox2+ Android 2.3 recording iOS 6 +.

Absolute+calc is ie9+,chrome19+,firefox4+ Android 4.4 recording iOS 6 +.

Absolute+transform No ie9+,chrome4+,firefox3.5+ Android 3pm iOS 6+

Writing-mode No ie6+,chrome4+,firefox3.5+ Android 2.3 recording iOS5.1 +

Lineheight No ie6+,chrome4+,firefox2+ Android 2.3 recording iOS 6 +

Table No ie6+,chrome4+,firefox2+ Android 2.3 recording iOS 6 +

Css-table No ie8+,chrome4+,firefox2+ Android 2.3 recording iOS 6 +

Flex No ie10+,chrome4+,firefox2+ Android 2.3 recording iOS 6 +

Grid No ie10+,chrome57+,firefox52+ Android 6pm iOS 10.3 +

Recently, it is found that many students do not pay enough attention to css, which is actually incorrect. For example, there are so many students who do not know the following simple question, I am also very speechless.

one hundred and twenty three

one hundred and twenty three

.red {

Color:red

}

.blue {

Color:blue

}

The above is all the contents of the article "how to use CSS to achieve horizontal and vertical centering". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.