What methods are there to achieve vertical centering in css?

The method to achieve vertical centering in css is as follows:

1. Use line-height to achieve centering. This method is suitable for pure text;

  
   
 css布局,实现垂直居中 
 

Effect:

(Recommended tutorial:CSS tutorial)

2. By setting the relative positioning of the parent container, the child Absolute positioning is set at the level, and the label is adaptively centered through margin;

  
   
 css布局,实现垂直居中 
 

Effect:

3. Flexible layout flex parent setting display: flex; Set the margin of the child to auto to achieve adaptive centering;

  
   
 css布局,实现垂直居中 
 

Effect:

4. The parent sets relative positioning and the child sets absolute positioning. , and achieved through displacement transform;

  
   
 css布局,实现垂直居中 
 

Effect:

5. The parent sets the elastic box and sets the related properties of the elastic box;

Effect:

6. Grid layout, the parent is converted into table form, and then the child is implemented by setting inline or inline blocks. (It should be noted that the prerequisite for the use of vertical-align: middle is inline elements and elements with a display value of table-cell).

Effect:

Related video tutorial recommendation:css video tutorial

The above is the detailed content of What methods are there to achieve vertical centering in css?. For more information, please follow other related articles on the PHP Chinese website!