What are the methods for vertical centering in css

Method: 1. Use the "display:table-cell;vertical-align:middle;" style; 2. Use flex layout; 3. Use absolute positioning and negative margins; 4. Use absolute positioning and transform Attributes; 5. Use absolute positioning and attributes such as top and left.

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

Vertical centering is one of the very common effects in layout. In order to achieve good compatibility, the method of achieving vertical centering on the PC side is generally through absolute positioning, table-cell, negative margins and other methods. With CSS3, vertical centering for mobile terminals is more diverse.

Method 1: table-cell

html structure:

<div class="box box1">
        <span>垂直居中</span>
</div>

css:

.box1{
	display: table-cell;
	vertical-align: middle;
	text-align: center;			
}

Method 2: display:flex

.box2{
	display: flex;
	justify-content:center;
	align-items:Center;
}

Method 3: Absolute positioning and negative margins

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

Method 4: Absolute positioning and 0

.box4 span{
  width: 50%;  
  height: 50%;  
  background: #000;
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;  
}

This method is somewhat similar to the above, but here, centering is achieved by setting margin:auto and top, left, right, and bottom to 0. It's amazing. However, you need to determine the height of the internal elements here. You can use percentages, which is more suitable for mobile terminals.

Method 5: translate

.box6 span{
			position: absolute;
			top:50%;
			left:50%;
			width:100%;
			transform:translate(-50%,-50%);
			text-align: center;
		}

This is actually a transformation of method 3, and the shift is achieved through translate.

Method 6: display:inline-block

.box7{
  text-align:center; 
  font-size:0;
}
.box7 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

This method is really clever...use: after to occupy the space.

(Learning video sharing: css video tutorial)

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