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

This article mainly shows you "CSS how to achieve indefinite width and height vertical horizontal center", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS how to achieve variable width and height vertical horizontal center" this article.

Vertical centering is a clich é question in CSS and is often mentioned during interviews. So, today we're going to talk about nine different ways to center.

There are common flex, transform, absolute, and so on. There is also a grid layout for CSS3. There are also pseudo-element methods, yes, you read it correctly,:: after and:: before can also be centered.

1 、 flex

Your first reaction may be flex. Because it is written in a simple and intuitive way, and there is no problem with compatibility. It is the first choice for the mobile phone to be centered.

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc;} .flex-center {display: flex; justify-content: center; align-items: center Specially built learning Q-q-u-n ⑦⑧④-⑦⑧③-zero ①② to share learning methods and small details that need attention, communicate with each other, constantly update the latest tutorials and learning skills (from zero to WEB front-end project practical tutorials, learning tools, full-stack development learning routes and planning)

Using two key attributes: justify-content and align-items, both of which are set to center, the center can be achieved.

It is important to note that the flex-center here must be hung in the parent element so that the only child element is centered.

2. Flex + margin

This is a variation of the flex method. The parent element sets flex, and the child element sets margin: auto;. It can be understood that the child elements are "squeezed" into the middle by the surrounding margin.

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; display: flex;}. Wrapper > p {margin: auto;} 3, transform + absolute

This combination is often used for centered display of pictures.

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; position: relative;}. Wrapper > img {position: absolute; left: 50%; top: 50%; transform: translate (- 50%,-50%);}

Of course, you can also move the relative positioning of the parent element wrapper into the child element img, replacing the absolute positioning. The effect is the same.

4 、 table-cell

The use of table cell center effect display. Like flex, it needs to be written on the parent element.

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; display: table-cell; text-align: center; vertical-align: middle;}

5. The values of absolute + are equal in all four directions.

Using an absolute positioning layout, set margin:auto;, and set the values of top, left, right, and bottom to be equal (not necessarily 0).

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; position: relative;}. Wrapper > p {width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

This method is generally used for pop-up layers, and you need to set the width and height of the pop-up layer.

6 、 writing-mode

This method can change the display direction of the text, such as making the display of the text vertical.

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; writing-mode: vertical-lr; text-align: center;}. Wrapper > .wrapper-inner {writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;} .wrapper > .wrapper-inner > p {display: inline-block; margin: auto; text-align: left;}

There are still some minor flaws in compatibility, but most browsers, including mobile phones, already support writing-mode.

7 、 grid

Like tables, grid layouts allow us to align elements by row or column. In terms of layout, however, grids are more likely to do or simpler than tables.

Horizontal and vertical

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; display: grid;} .wrapper > p {align-self: center; justify-self: center;}

However, it is not as compatible as flex, especially IE browsers, which only support IE10 and above.

8 、:: after

Can pseudo elements also be used to achieve centralization? It still feels amazing. Take a look at the following example:

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; text-align: center;}. Wrapper::after {content:'; display: inline-block; vertical-align: middle; height: 100%;} .wrapper > img {vertical-align: middle;}

The horizontal direction is easy to understand. The vertical direction can be understood as: after pulls img down to the middle.

9 、:: before

The other is the magic cast together with font-size: 0;.

.wrapper {width: 300px; height: 300px; border: 1px solid # ccc; text-align: center; font-size: 0;} .wrapper::before {display: inline-block; vertical-align: middle; font-size: 14px; content:'; height: 100%;} .wrapper > img {vertical-align: middle; font-size: 14px;}

The mystery of font-size: 0; is that it eliminates the gap between tags. In addition, because pseudo elements are paired with the most basic CSS writing, there is no risk of compatibility.

The above is all the contents of the article "how to achieve the vertical horizontal center of variable width and height in CSS". 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.