Webpage element center strategy _ (2) vertical center of elements, center strategy

Webpage element center strategy _ (2) vertical center of elements, center strategy
Vertical center of elements in a single row

Set the Row Height of the element in the row to the height of the parent element or the height of the package block to realize vertical center. For details, see the code.

Code Implementation

Index.html

<! DOCTYPE html> 

Multi-row vertical center scheme of intra-row Elements

Let the package block simulate the table unit, and then usevertical-alignControl position (support for English word position and percentage adjustment)

Code Implementation

Index.html

<! DOCTYPE html> 

Scheme for vertical center (known height) of block elements

With absolute positioning, the elements are directly set to half of the page, and then the elements are pulled back to half of the size to achieve vertical center.

Tips
If the parent element of the absolute element uses any position attribute, the absolute of the child element cannot be separated from the parent element.

Code Implementation

Index.html

<! DOCTYPE html>