table元素自带垂直居中

1
2
3
4
5
6
<table class="parent">
  <tr>
    <td class="child"> table自带垂直功能 </td>
    <td class="child"> table自带垂直功能 </td>
  </tr>
</table>
1
2
3
4
5
6
7
8
.parent {
  border: 1px solid red;
  padding: 10px;
}
.child {
  border: 1px solid green;
  padding: 10px;
}

示例代码 - table


行内元素垂直居中

单行内联元素

通过设置内联元素的高度(height)等于行高(line-height)，从而使元素垂直居中。

1
2
3
<div>
  <span>单行内联元素垂直居中</span>
</div>
1
2
3
4
5
6
7
8
div {
  height: 100px;
  border: 1px solid red;
}
span {
  border: 1px solid green;
  line-height: 100px;
}

示例代码 - 单行内联元素


多行内联元素

利用表布局

1
2
3
4
5
<div class="parent">
  <span class="child">
    内联元素是在表格里面，这时可以利用inline元素的CSS属性vertical-align，默认是baseline属性，将其设置为middle
  </span>
</div>
1
2
3
4
5
6
7
8
9
.parent {
  border: 1px solid red;
  height: 200px;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

示例代码 - 表布局


利用flex布局

利用 flex 布局实现垂直居中，将主轴方向定义为纵向，然后使用 justify-content 将其居中。

由于 flex 布局是 CSS3 中定义，较老的浏览器存在兼容性问题。

块级元素也可使用 flex 布局实现居中。

1
2
3
4
5
<div class="parent">
  <span>
    利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，较老的浏览器存在兼容性问题。
  </span>
</div>
1
2
3
4
5
6
7
.parent {
  border: 1px solid red;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

示例代码 - flex布局


添加伪元素

先给子元素设置为行内块级元素，并设置 vertical-align，然后再给父元素添加 100% 高度的伪元素 before 或 after，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

1
2
3
4
5
<div class="parent">
  <span class="child">
    给父元素添加100%高度的伪元素before、after，让文本和伪元素垂直对齐，从而达到垂直居中的目的
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent {
  border: 1px solid red;
  height: 200px;
  text-align: center;
}
.child {
  border: 1px solid blue;
  display: inline-block;
  width: 300px;
  height: 100px;
  vertical-align: middle;
}
.parent::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

示例代码 - 添加伪元素


块级元素垂直居中

定高

绝对定位 + margin-top

如果我们知道居中元素的高度和宽度,可以通过绝对定位元素距离顶部 50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了。

1
2
3
4
5
<div class="parent">
  <div class="child">
    固定高度的块级元素; 如果我们知道居中元素的高度和宽度, 可以通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.parent {
  border: 1px solid red;
  position: relative;
  height: 300px;
}
.child {
  border: 1px solid red;
  position: absolute;
  height:200px;
  top: 50%;
  margin-top: -100px;
}

示例代码 - margin-top


绝对定位 + margin:auto;

在子元素上设置 position: absolute;、margin: auto;，然后分别给 top、bottom、left、right 都设置为 0 即可。

1
2
3
4
5
<div class="parent">
  <div class="child">
    子元素设置absolute，margin:auto，top、bottom、left、right为0
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
  border: 1px solid red;
  height: 200px;
  position: relative;
}
.child {
  border: 1px solid green;
  position: absolute;
  width: 200px;
  height: 100px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

示例代码 - margin:auto;


不定高

transform属性

当垂直居中的元素的高度和宽度未知时，我们可以借助 CSS3 中的 transform 属性向 Y 轴反向偏移 50% 的方法实现垂直居中，但是部分浏览器存在兼容性的问题。

1
2
3
4
5
<div class="parent">
  <div class="child">
    未知高度的块级元素;当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中，但是部分浏览器存在兼容性的问题。
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.parent {
  border: 1px solid red;
  position: relative;
  height: 200px;
}
.child {
  border: 1px solid blue;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

示例代码 - transform


使用假表格

将父元素 display 设置为 table-cell，然后利用 vertical-align 实现垂直居中。

1
2
3
4
<div class="parent">
  <div class="child">
    利用假表格来实现，在父元素设置vertical-align: middle; display: table-cell;即可</div>
</div>
1
2
3
4
5
6
7
8
9
10
.parent {
  border: 1px solid red;
  width: 250px;
  height: 200px;
  vertical-align: middle;
  display: table-cell;
}
.child {
  border: 1px solid green;
}

示例代码 - 假表格