CSS vertical center of the alternative implementation code detailed explanation (unusual road)

Time:2021-2-19

preface

As we all know, “how can CSS center elements vertically?” It has become a commonplace problem. At present, there are many solutions to this problem. These solutions also have their own applicable scenarios, advantages and disadvantages, which are roughly as follows:

  • Flex layout
  • Grid layout
  • Table layout
  • Line height with height
  • Position with margin
  • Position with transform

Now let’s understand the principle of one of the effective but rarely used schemes: pseudo elements:beforecollocationvertical-align:middleThe implementation elements are vertically centered. Let’s take a look at the specific code implementation


<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    font-size: 0;
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    vertical-align: middle;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

The running result of the above code is as follows:

I believe we are familiar with the code, but do you really understand the principle? Now let’s take a look at how it achieves vertical centering step by step

analysis

First of all, we need to know a key knowledge point, that is: the position of the parent element baseline can be changed, it is not fixed, it is very important to remember this
Next, let’s simplify the code and get rid of the key parts


<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    /* font-size: 0; */
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    /* vertical-align: middle; */
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    /* vertical-align: middle; */
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

We willfont-size:0andvertical-align:middleAfter annotation, the running results are as follows:

It’s not hard to see from the picture, rightBeforePseudo elements (hereinafter referred to as pseudo elements), with or without vertical- align:middle , the result is the same, in the vertical direction it will always occupy the parent element; but for the. Child element, the situation is different, its position in the vertical direction has changed, so why?
In fact, the purpose of pseudo element here is to change (or redefine) the position of parent element baseline. Let’s review itvertical-align:middleDefinition in MDN document

Middle: add the parent element to the middle of the element and the baseline of the parent elementx-heightAlign half of

So, compare our example:

  • The middle of the pseudo element is the midpoint of its vertical direction, which is not difficult to understand
  • No matter where the parent element is, we just need to remember that it can be changed
  • Half of the x-height, because we’re in the parent elementfont-sizeSet to 0, sox-heightHalf of (the height of the lowercase x) is also 0, which means that there is no height

In this way, it is equivalent to the midpoint of the pseudo element, as long as it is aligned with the baseline of the parent elementx-heightIt’s 0, so it doesn’t matter whether to add or not. In addition, the elements in CSS are aligned on the top left by default. For this restriction, that is, when the pseudo elements are addedvertical-align:middleThen, the height of the pseudo element is determined: 100% of the height of the parent element, and the midpoint is also determined
Next, the pseudo element will say to the parent element: the midpoint of my vertical direction has been determined. It is impossible to change. It is impossible to change in my life, but my midpoint wants to align with your baseline. You can do it yourself
Then the parent element compromises and moves its own baseline to a position horizontally aligned with the midpoint of the pseudo element. The position of the parent element baseline is also determined, approximately half of its height
Finally, the. Child element adds its ownvertical-align:middleAccording to middle: add the parent element to the middle of the element and the baseline of the parent elementx-heightHalf of the. Child elementfont-sizeSince the inheritance relationship is also 0, its midpoint is naturally aligned with the baseline of the parent element that has already been determined, so as to achieve the vertical center, which ends here

summary

In fact, the principle of this vertical centering method mainly includes the following points:

  • Elements in CSS are top left aligned by default
  • The pseudo element height is consistent with the parent element
  • The parent element sets font size to 0, and then x-height to 0
  • The position of the parent element baseline can be changed

So far, this article about the alternative implementation of CSS vertical center is introduced here. For more related content of CSS vertical center, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!