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

This article mainly talks about "what are the skills of CSS vertical center". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the skills of CSS vertical center"?

1 、 Line-height

Applicable situation: vertical centering technique of single-line text

This method is probably the most widely known, and it is most common in single-line text applications, such as objects such as buttons, or drop-down boxes and navigation elements. The principle of this method is that after setting the line height of a single line of text, the text will be located in the vertical middle of the line height, and the need for vertical centering can be easily achieved by using this principle.

2. Line-height + inline-block

Applicable scenario: vertical centering technique for multi-object

Since you can use the first way to center row elements vertically, of course there is no reason why you can't do multiple rows ~ but you need to treat multiple elements or multiple row elements as one row element, so we have to wrap the data one more layer, set it to inline-block, and use inline-block instead of height in the outer object of the inline-block object. In this way, you can achieve the goal of vertical centering, so that your data can be vertically centered normally, including title and content.

3. Before + inline-block

Applicable scenario: CSS vertical centering technique for multi-object

The writing of before pseudo-class elements with inline-block attributes should be a traditional technique of vertical centering. The advantage of this method is that there is no need to set a special height for child elements. We will use: before pseudo-class elements to set 100% high inline-block, and then the child elements that need to be centered will also be set to inline-block, and then we can use vertical-align:middle to achieve the purpose of vertical centering. In the past, this approach was actually a great vertical center solution, except that you need to specifically deal with the small flaw of 4-5px space between inline-block elements, but it is also very practical.

4. Negative value of absolute + margin

Applicable scenario: vertical centering technique for multiline text

Who says absolute positioning should be used less? Amos believes that there is no problem of less use and more use. The key point is whether you use it properly. In this example, you will set top:50% to capture 50% of the space height, and then set the margin-top of the center element to negative half of the height, so that the element can be centered. This method has been in the middle for many years since ancient times.

5. Absolute + margin auto

Applicable scenario: vertical centering technique for multiline text

Another absolute positioning vertical center scheme, this method is a bit special, when the element is set to absolute positioning, it is assumed that it can not grasp the overall usable space range, so margin:auto will fail, but when you set top:0;bottom:0 When, the absolute positioning element will catch the available space, and then your margin:auto will take effect (magic bar). If your absolute positioning element needs to be horizontally centered in the parent layer, then you can also set left:0;right:0; to allow the absolute positioning element to obtain the usable range of space, and then let marign-left and margin-right be set to auto. But the disadvantage of this approach is that your positioning element must have a fixed width and height (percentage is also counted) in order to center properly.

6. Absolute + translate

Applicable scenario: vertical centering technique for multiline text

In a way of absolute positioning center, this method should be the most convenient, because the positioning element in this center does not need a fixed width and height. We use top and right to set the top and left of the element to 50%, and then use translate (- 50% right 50%) to shift 50% of the width and height of the element. (css3 is great)

7. Flex + align-items

Applicable scenario: vertical centering technique for multiline text

Flex! Front-end drugs! The treasure at the back end! Since its introduction, this thing has been testing the conscience of web developers, whether or not to abandon float and embrace flex. I think this answer is a ruler of freedom in everyone's heart, but touching Flex first and then Float can be said to be sweet first and then bitter. It is hard to say whether to eat sugar cane or eat sugar cane in this order. Since Flex, children get 100 points in the exam, design web pages do not run version, customer web pages are all RWD, and the boss is very happy to make money. I am also willing to get a raise (overtime), I can't help saying that Flex is really a miracle, we just need to set the parent layer display:flex and set the cross axis attribute align-items:center (say so many results focus on a line of words), the advantage of this way is that this layer does not need to set height to automatically center, and the original code is extremely clean, really use once to let you ascend.

8. Flex +: before + flex-grow

Applicable scenario: vertical centering technique for multiline text

Flex has a variety of ways to let you center the data and apply the extension characteristics of Flex-grow. In this example, Amos applies the flex-direction:column vertical arrangement, collocation: before pseudo-elements apply the flex-grow extension value can obtain the characteristics of all the remaining space, set it to half of the remaining space to accurately push the content data to the vertical middle position, which can be regarded as an extension of traditional techniques. In that case, isn't the seventh way faster?

9. Flex + margin

Applicable scenario: vertical centering technique for multiline text

Continue to center with Flex. Because of the particularity of spatial interpretation of Flex elements, we can automatically center as long as we set display:flex on the parent element, and then set margin:auto on the elements that need to be centered vertically.

10. Flex + align-self

Applicable scenario: vertical centering technique for multiline text

Align-self should be familiar to everyone, basically, the individual alignment of flex minor axis cross axis can be achieved by setting align-self:center for a single sublayer element.

11. Flex + align-content

Applicable scenario: vertical centering technique for multiline text

Under normal circumstances, align-content can only center the sub-axis multi-line flex item, but when I am not sure how many sub-layer elements there are today, and sometimes there may be a single situation, this technique can be used (of course, you can also have other solutions). Since it can only be used by multi-line child elements, let's add two more brothers to a single subcomponent, using: before and: after to increase the child elements to multiple. So you can use the align-content property of flex to center

12. Grid + template

Applicable scenario: vertical centering technique for multiline text

The most amazing thing about CSS Grid is the function of template, which is simply using a piece of element as a canvas. We only need to set the template to three columns to center vertically.

13. Grid + align-items

Applicable scenario: vertical centering technique for multiline text

Align-items is available not only for Flex, but also for CSS Grid, but in Flex, align-items is aligned for the secondary axis cross axis, while in CSS Grid, it is aligned for the Y axis. You can think of it as a vertical-align attribute for storing cells in a table.

14. Grid + align-content

Applicable situation: the vertical centering technique of du Hang's characters

CSS Grid's align-content is a little different from Flex's align-content. CSS Grid's interpretation of space will be somewhat different from that of Flex, so align-content can only work for multi-line elements in Flex, but there is no such problem in Grid, so we can happily use align-content to center child elements vertically without any effort.

15. Grid + align-self

Applicable scenario: vertical centering technique for multiline text

Align-self should be no stranger to everyone. Basically, it is the individual alignment of the grid Y axis. As long as it is set to align-self:center for a single sublayer element, the vertical center can be achieved.

16. Grid + place-items

Applicable scenario: vertical centering technique for multiline text

I don't know how many people have used the attribute place-items. It is an acronym for align-items and justify-items. To put it simply, it is aligned horizontally and vertically. Of course, setting center will center.

17. Grid + place-content

Applicable scenario: vertical centering technique for multiline text

How many people have used the property place-content? this property is the abbreviation of align-content and justify-content. To put it simply, it is horizontal and vertical alignment. Of course, setting center will center it.

18. Grid + margin

Applicable scenario: vertical centering technique for multiline text

Continue to use Grid to center, because of the particularity of the spatial interpretation of the Grid element, we just need to set display:grid on the parent element, and then set margin:auto on the elements that need to be centered vertically. Why does that describe deja vu?

19 、 Display:table-cell

Applicable scenario: vertical centering technique for multiline text

I think developers of a little age have seen this trick. Of course, it is the first time for a developer like me to see it. The principle of this trick is to use the CSS display property to set the div to the table cell, so that you can use the vertical-align attribute that supports storage cell alignment to center the information vertically.

20 、 calc

Applicable scenario: vertical centering technique for multiline text

Cale is the abbreviation of the computer English word calculator. This css method proposed by Microsoft is really a blessing for web developers. It is so fierce that we can do the calculation directly in the web page. From then on, we no longer have to rack our brains in mathematical calculation, or find a way to use js to calculate dynamically. We can easily use the calc () method to calculate the actual height of the percentage timely and dynamically. It is really an epoch-making method, but this method needs to be paid attention to if it is widely used. The performance of the web page will be relatively poor, so please use it carefully.

21. Relative + translateY

Applicable scenario: vertical centering technique for multiline text

This trick is to use the top:50% trick to create a fixed percentage distance above your element, and then let the element to be centered use the percentage of tanslateY to achieve the vertical center requirement. Translate is a great attribute. Because the percentage unit of translate uses the size of the element as 100%, it makes it much easier for us to do things with the width and height of the element itself.

At this point, I believe you have a deeper understanding of "what are the skills of CSS vertical center". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.