垂直居中的 7 种类方法

浪里淘沙的小法师
114 阅读6分钟

1. table 自带垂直居中

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class='parent'>
    <tr>
      <td class='child'>一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</td>
    </tr>
    <tr>
      <td class='child'>两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字两串文字</td>
    </tr>
  </table>
</body>
</html>

CSS

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

.child{
  border:1px solid green;
}

2. 在前后加一个 100% height 的 before、after 的 inline-block 元素

不推荐使用这个方法，下策

before 和 after 可以使用伪元素

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

CSS

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

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

.parent::before{
  content:'';
  display:inline-block;
  border:1px solid green;
  height:100%;
  vertical-align:middle
}

.parent::after{
  content:'';
  display:inline-block;
  border: 1px solid green;
  height:100%;
  vertical-align:middle;
}

3. div 装成 table

不推荐使用这个方法，下策

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="table">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
    </div>
  </div>
</body>
</html>

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;
}

4. margin-top:-50%

不推荐使用这个方法，中策

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

CSS

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

.child{
  width:300px;
  border:1px solid green;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-150px;
  margin-top:-50px;
}

5. translate(-50%,-50%)

推荐使用这个方法，上策

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

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

.child{
  width:300px;
  border:1px solid green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

6. absolute margin auto

不推荐使用这个方法，因为需要写高度，中策

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
</html>

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

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

7. flex

推荐使用这个方法，上上策

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
    
  </div>
</body>
</html>

CSS

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}
avatar
文章
阅读
粉丝