元素实现垂直居中的方式

青砚
128 阅读1分钟

1. .parent 的 height

如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中

2. table 自带功能

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table</title>
  
  <style>
    .parent {
      border: 1px solid red;
      height: 600px;
    }
    
    .child {
      border: 1px solid green;
    }
  </style>
</head>
<body>
<table class="parent">
  <tr>
    <td class="child">
      内容
    </td>
  </tr>
</table>
</body>
</html>

3. div 装成 table

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table</title>
  
  <style>
    div.table {
      // 把元素变成table
      display: table;
      border: 1px solid red;
      height: 600px;
    }
    
    div.tr {
      // 把元素变成tr
      display: table-row;
      border: 1px solid green;
    }
    
    div.td {
      // 把元素变成td
      display: table-cell;
      border: 1px solid blue;
      // 居中
      vertical-align: middle;
    }
    
    .child {
      border: 10px solid black;
    }
  </style>
</head>
<body>
<div class="table">
  <div class="td">
    <div class="child">
      context
    </div>
  </div>
</div>
</body>
</html>

4. margin-top -50%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>center</title>
  <style>
    .parent {
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    
    .child {
      border: 1px solid green;
      width: 300px;
      height: 100px;
      position: absolute;
      // child 绝对定位后，将 child 的右上顶点移到 parent 的中心
      top: 50%;
      left: 50%;
      // 将 child 向右移动 width 的一半
      margin-left: -150px;
      // 将 child 向上移动 top 的一半
      margin-top: -50px;
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="child">
    内容
  </div>
</div>
</body>
</html>

5. translate -50%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>center</title>
  <style>
    .parent {
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    
    .child {
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);  // translate(x,y)
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="child">
    内容
  </div>
</div>
</body>
</html>

6. absolute margin auto

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>center</title>
  <style>
    .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;
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="child">
    内容
  </div>
</div>
</body>
</html>

7. flex

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>center</title>
  <style>
    .parent {
      height: 600px;
      border: 3px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .child {
      border: 3px solid green;
      width: 300px;
    }
  </style>
</head>
<body>
<div class="parent">
  <div class="child">
    内容
  </div>

</div>
</body>
</html>
avatar
文章
阅读
粉丝