当前位置：网站首页>Seven ways to achieve vertical centering

Seven ways to achieve vertical centering

2022-07-05 11:58:00 【Xiongba is also】

If .parent Of height Don't write , You only need to padding: 10px 0; Will be able to .child Vertical center ;

If .parent Of height It's dead , It's hard to put .child In the middle , Here's how to center vertically .

advice ： Can not write height Just don't write height.

1、table Built in features

Code

// html
<body>
  <table class="parent"> 
    <tr>
      <td class="child">
      【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
      </td>
    </tr>
  </table>
</body>

.parent{
    
  border: 1px solid red;
  height: 600px;
}

.child{
    
  border: 1px solid green;
}

design sketch

2、100% High after before add inline block

Code

// html
<body>
  <div class="parent">
    <span class=before></span><div class="child">
      【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div><span class=after></span>
  </div>
</body>

.parent{
    
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child{
    
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent .before{
    
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
    
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

design sketch

Optimized version

// html
<body>
  <div class="parent">
    <div class="child">
      【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div>
  </div>
</body>

.parent{
    
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child{
    
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before{
    
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent:after{
    
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

3、div Pretend to be table

Code

// html
<body>
  <div class="table">
      <div class="td">
        <div class="child">
           【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
        </div>
    </div>
  </div>
</body>

// css div.table{
    
  display: table;
  border: 1px solid red;
  height: 600px;
}

div.tr{
    
  display: table-row;
  border: 1px solid green;
}

div.td{
    
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
    
  border: 10px solid black;
}

design sketch

4、margin-top -50%

Code

// html
<body>
  <div class="parent">
    <div class="child">
     【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div>
  </div>
</body>

// css .parent{
    
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
    
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}

design sketch

5、translate -50%

Code

// html
<body>
  <div class="parent">
    <div class="child">
      【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div>
  </div>
</body>

// css .parent{
    
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
    
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

design sketch

6、absolute margin auto

Code

// html
<body>
  <div class="parent">
    <div class="child">
        【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div>
  </div>
</body>

// css .parent{
    
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
    
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

design sketch

7、flex

Code

<!DOCTYPE html>
// html
<body>
  <div class="parent">
    <div class="child">
       【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
    </div>
  </div>
</body>

// css .parent{
    
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
    
  border: 3px solid green;
  width: 300px;
}