Detailed explanation of the alternative implementation code of CSS vertical centering (unconventional)

Preface

As we all know, "How to vertically center an element in CSS?" is already a common question. There are many solutions to this problem. These solutions also have their own applicable scenarios and advantages and disadvantages, which are roughly as follows:

• Flex layout
• Grid layout
• Table layout
• line-height with height
• Position with margin
• Position with transform
• ...

So today we will understand the principle of one of the effective but less commonly used solutions, which is: the pseudo-element :before is combined with vertical-align:middle to achieve vertical centering of elements. 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 result of running the above code is as follows:

I believe everyone is already familiar with the code, but do you really understand the principles behind it? Next, let's take a look at how it achieves vertical centering step by step.

analyze

First of all, we need to know a key point, that is: the position of the parent element's baseline can be changed, it is not fixed, it is very important to remember this. Next, let's simplify the code and remove 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>

After we comment out font-size:0 and vertical-align:middle , the running results are as follows:

It is not difficult to see from the figure that于:before pseudo-element (hereinafter referred to as the pseudo-element), whether vertical-align:middle is added or not, the result is the same. It will always fill the parent element in the vertical direction. But the situation is different for the .child element. Its vertical position has changed. So why is this?
In fact, the role of the pseudo-element here is to change (or redefine) the position of the parent element's baseline. Let's review the definition of vertical-align:middle in the MDN document.

middle: Aligns the middle of the element with the baseline of the parent element plus half of the parent element's x-height

So, compare our example:

• The middle of the pseudo-element is its vertical midpoint, which is not difficult to understand.
• We don't care where the parent element's baseline is for now, it is enough to remember that it can be changed.
• Half of the x-height, because we set font-size to 0 in the parent element, so half of x-height (the height of the lowercase x) is also 0, that is, no height

x-height : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : vertical-align:middle : : : : : : : : : : : : : : : : : : : : : : : : : font-size x-height : : : : : : : : :

Summarize

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

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

This is the end of this article about alternative implementations of CSS vertical centering. For more relevant CSS vertical centering content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!