Vertical centring in CSS was always a big problem when I first started working. Every time it is used, go to the Internet to search, search, search, half a day to find the right solution. And then the next time I meet, uh, I forget

Later, I recall that there are several different application scenarios for vertical centering of CSS, which require different solutions. That’s why it’s always like, hey, the last solution didn’t work out, right? (the original is not my IQ problem) good nonsense no more to say, record the different scenarios encountered and solutions, I hope to be helpful to myself or others.


An element inline or inline-* is vertically centered

You can use attributes like padding, line-height, vertical-align, etc. There are two specific scenarios:

1. Center a single line vertically, such as a single line of text or a link

In this case, you can center the element vertically by adding the same padding above and below the element.

If you don’t want to use padding, you can center it vertically by setting the element line-height equal to the height of the parent container. Note that you need to consider height changes from the padding and border of the parent container.

2. Center multiple lines vertically, such as multiple lines of text

As with a single line of text, add the padding of the same size above and below the element

Another way is to use the table attribute: set the parent container to table, set the vertical centered element to table-cell, and then use the vertical-align attribute to center it.


Block-level elements are vertically centered

Different methods are used when the height of a block-level element is known or unknown, usually with absolute positioning and translate.

1. The height of block-level elements is known

At this point, the absolute positioning method can be used, and the absolute positioning center can be realized by virtue of the feature that margin can be negative:

/* The element height is 100px */ height: 100px; /* Position: absolute; /* Position: absolute; top: 50%; Margin-top: -50px; margin-top: -50px;Copy the code

The author said that the frequency of using this code is simply not too high ~ so under the premise of using SCSS, they encapsulated a mixin, specifically used to achieve this positioning mode.

@mixin abs_h_center($width) {position: absolute; width: $width; left: 50%; margin-left: -($width/2); } @mixin abs_v_center($height) { position: absolute; height: $height; top: 50%; margin-top: -($height/2); } @include abs_v_center(200px);} @include abs_v_center(200px); }Copy the code
2. The height of block-level elements is not fixed

The principle is similar to the method of using absolute center location mentioned above, except that when the height of an element is uncertain, the element is moved up half of its height with the help of translateY, so as to achieve vertical center.

/* Put the top edge of the element in the vertical middle */ position: relative; top: 50%; /* Transform: translateY(-50%); /* Transform: translateY(-50%);Copy the code

This is enough to cover most usage scenarios. Of course, these implementation methods can be mixed, depending on the application scenario.

In addition, other vertical centralization implementations will be updated here in the future.