css vertical centering implementation code

This article mainly shares with you the css vertical centering implementation code. I hope this css code can help everyone.

1. If it is a single line of text, the value of line-height is equal to height

The case is as follows:

.verticle{    height: 100px;    line-height: 100px;}

2. For elements with known width and height, use absolute positioning

The case is as follows:

.container {  position: relative; 
}.vertical {  width : 300px; /*子元素的宽度*/
  height: 300px;  /*子元素高度*/
  position: absolute;  top:50%;  /*父元素高度50%*/
  left: 50%; 
  margin-left: -150px;  margin-top: -150px; /*自身高度一半*/}

3. Elements with unknown width and height are rotated using css3

The case is as follows:

.container {  position: relative; 
}.vertical {     position:absolute;     top: 50%;     left:50%;     transform:translate(-50%,-50%);}

4. Elasticity of css3 The box model

case is as follows:

.content{     display:flex;     justify-content: center; /*子元素水平居中*/
     align-items: center; /*子元素垂直居中*/}

5. Simulate table layout, the disadvantage is that IE6,7 is not compatible

The case is as follows:

.container {      display: table;}.content {      display: table-cell;      vertical-align: middle; }

Related recommendations:

6 CSS horizontal and vertical centering solutions

4 ways to achieve CSS horizontal and vertical centering

How to vertically center img and span in div

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