Share nine pure CSS methods to achieve vertical centering

This article focuses on vertical centering and mainly introduces various methods of vertical centering. I believe there is always one you need. Interested friends can refer to it. I hope it will be helpful to you.

Vertical centering is one of the very common effects in layout. In order to achieve good compatibility, the method to achieve vertical centering on the PC side is generally through absolute positioning, table-cell, negative margins, etc. . 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 it is centered by setting margin:auto and top, left, right, and bottom to 0. It is very magical. 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.

Method 7: display:flex and margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}

Method 8: display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}

css3 is broad and profound and can achieve many creative effects, so it needs to be studied carefully.

Method 9: display:-webkit-box

This method inserts a div outside the content element. Set this div height:50%; margin-bottom:-contentheight;.

content clears the float and displays it in the middle.

<div class="floater"></div>  
<div class="content"> Content here </div>  
.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}

Advantages:

Applicable to all browsers

When there is not enough space (for example: the window is reduced) the content will not be truncated and the scroll bar will appear

Disadvantages:

The only thing I can think of is the need for additional empty elements (not that bad, another topic)

The above is the detailed content of Share nine pure CSS methods to achieve vertical centering. For more information, please follow other related articles on the PHP Chinese website!