Applying Vetical-align:middle to block-level elements using pseudo-elements to center vertically

The function of the vetical-align is to align the inline elements vertically.

Possible values

Baseline	Default. element is placed on the baseline of the parent element.
Sub	Subscript for vertical alignment of the aligned right.
Super	Superscript of vertical aligned aligned
Top	Aligns the top of the element with the top of the highest element in the row
Text-top	Aligns the top of the element with the top of the parent element's font
Middle	Place this element in the middle of the parent element.
Bottom	Aligns the top of the element to the top of the lowest element in the row.
Text-bottom	Aligns the bottom of the element with the bottom of the parent element's font.
Length
%	Use the percent value of the "Line-height" property to arrange this element. Negative values are allowed.
Inherit	Specifies that the value of the Vertical-align property should be inherited from the parent element.

You can control the alignment of elements in the vertical direction of lines within a picture, text, etc.

How do I use Vetical-align to center the block-level elements vertically?

Take the following example:

body{

<div class= "wrapper" >

<div class= "Content" >some content</div>

</div>

}

1. Set the height for the parent container wrapper

html,body{

height:100%

}

. wrapper{

height:100%

}

2. Make content containers appear inline elements

. content{

Display:inline-block;

}

3. Construct an empty content inline-block by before pseudo class before content container

. wrapper:before{

Content: "";

Display:inline-block;

height:100%;

Vetical-align:middle;

}

At this point, the entire page has only one row, with two inline-block, allowing empty content lines to align up and down

4. Add Vetical-align property for content container

. content{

Vetical-align:middle;

}

This way, block-level elements are always vertically aligned in the browser.

There are also elements such as adding an empty IMG attribute to an HTML element or displaying it as a TABLE element, which destroys the structure of the HTML element and is not described here.

Applying Vetical-align:middle to block-level elements using pseudo-elements to center vertically