Elements of inline or inline-* are vertically centered
The properties padding, line-height, vertical-align can be used.There are two specific scenarios:

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

In this case, vertical centering can be achieved by adding a padding value of the same size above and below the element.

<div class="container">
    <p>Single line of text vertically centered, adding the same padding-top & padding-bottom value</p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 10px;
}

p {
    margin: 0;
    color: #fff;
    /*  Centering a single line of text with the same upper and lower padding values */
    padding-top: 100px;
    padding-bottom: 100px;
}
//Specially established learning Q-q-u-n: _-zero 2. Share learning methods and small details that need attention, and keep updating the latest teaching and learning techniques
(From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)

If you don't want padding to be inconvenient, you can achieve vertical centering by setting the line-height of the element equal to the height of the parent container.Note that at this point, it is important to consider the height changes caused by the padding and border of the parent container.

1. Multiple lines vertically centered, such as multiple lines of text

As with a single line of text, adding a padding value of the same size above and below an element is still useful ~

<div class="container">
    <p>
        //Multiline text is vertically centered, adding the same padding value above and below the element.<br />
        //It's just another piece of trivial nonsense to test.
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*  Add a padding value of the same size above and below an element */
    padding-top: 40px;
    padding-bottom: 40px;
}

Another approach is to use the properties of the table: to set the parent container to a table, you need to set the vertically centered element to a table-cell, and then you can use the vertical-align property to center.

<div class="container">
    <p>
        //Multiline text is vertically centered, the parent container is set to table, the elements that need to be vertically centered are set to table-cell, and the vertical-align attribute is used.
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /* Parent container set to table*/
    display: table;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /* The element that needs to be vertically centered is set to table-cell*/
    display: table-cell;
    vertical-align: middle;
}
//Block level elements vertically centered
//Usually, with absolute positioning and translate, different methods are used when block-level element heights are known or unknown.

1. Block level element height is known

//Absolute positioning can be used to achieve absolute positioning centering with the help of margin's ability to be negative:

/* The known element height is 100px (or a percentage, such as 80%)*/
height: 100px;

/* Use absolute positioning first, and place the upper boundary of the element in the vertical middle*/
position: absolute;  
top: 50%;

/* Then use margin-top to move the element half its height up*/
margin-top: -50px;  

<div class="container">
    <div class="v-c">
        <p>Use absolute positioning to center the element vertically.</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
    /* The parent container needs to set position so that elements that need to be vertically centered are absolutely positioned relative to the parent container*/
    position: relative;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    height: 200px;
    /* Use absolute positioning to center elements vertically*/
    position: absolute;
    top: 50%;
    margin-top: -100px; 
    /* padding and border need to be considered if box-sizing: border-box is not set;*/

}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}
//Specially established learning Q-q-u-n: _-zero 2. Share learning methods and small details that need attention, and keep updating the latest teaching and learning techniques
(From zero basics to front-end project hands-on tutorials, learning tools, full stack development learning routes and planning)

Indicates that code like this is hardly used too often ~so with scss, you encapsulated a mixin that was designed to accomplish this positioning.

// Define absolute positioning for horizontal and vertical centering
@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);
}

// You can then use it directly to avoid changing the margin-left or margin-top values when changing the width or height of the element
.content {
  @include abs_v_center(200px);
}

1. Block level element height is not fixed

Similar to the method of absolute positioning centering mentioned above, except that in the case of element height uncertainty, vertical centering is achieved by using translateY to move the element up half of its own height.

/* Place the upper boundary of the element in the vertical middle first*/
position: relative;  
top: 50%;

/* Then use translateY to move the element half its height up*/
transform: translateY(-50%);  

<div class="container">
    <div class="v-c">
        <p>Use translateY Center the element vertically.</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    /* Use translateY to center the element vertically*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

Now I think of these, they should cover most of the usage ~The above implementation methods, of course, can also be mixed, depending on the application scenario.