How to set vertical centering in css

How to set vertical centering in css: 1. Use the line-height attribute to center the text vertically; 2. Use CSS3 flex layout to center the text vertically; 3. Use absolute positioning and transform to center the block elements vertically; 4. Use flex layout to vertically center block elements.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css sets the text to be vertically centered

1. Line-height makes the text vertically centered

      
  
css 垂直居中了--文本文字
  

Rendering:

This will allow the text in the div to be centered horizontally and vertically

2. CSS3 flex layout Center the text vertically

      
  
css 垂直居中--文本文字（弹性布局）
  

Rendering:

css sets block elements to be vertically centered

1. Use absolute positioning and transform (unknown element height)

If we don’t know the height of the element, then we need to position the element first The center position of the container, and then use the translate attribute of transform to coincide the center of the element with the center of the parent container to achieve vertical centering:

      
  
 
css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中
 
  

Rendering:

2. Use flex layout

      
  
 
css 垂直居中了--弹性布局
 
  

Rendering:

(Learning video sharing:css video tutorial)

The above is the detailed content of How to set vertical centering in css. For more information, please follow other related articles on the PHP Chinese website!