23种CSS垂直居中技巧-前端开发

关于“23种CSS垂直居中技巧”的攻略，我会从以下三个部分进行详细讲解：

关于“23种CSS垂直居中技巧”的攻略，我会从以下三个部分进行详细讲解：

概述：介绍为什么需要垂直居中、垂直居中的相关概念、难点和解决方案。
解决方案：梳理23种CSS垂直居中技巧，并对它们进行详细讲解。
示例说明：通过两条具体的示例，让你更好地理解如何应用这些CSS垂直居中技巧。

进入正题：

一、概述

为什么需要垂直居中？

在Web开发过程中，为了让页面布局更加合理，我们经常需要进行垂直居中操作。比如，当我们需要将按钮或图片居中显示在父容器中，就需要使用垂直居中技巧。

垂直居中的难点在哪里？

CSS中的水平居中非常容易实现，但是垂直居中却常常让人们困惑。因为CSS中的垂直居中涉及到元素高度、行高、文本内容和图片等因素的影响。不同的情况下，需要应用不同的垂直居中技巧以达到所需效果。

垂直居中的解决方案有哪些？

在这篇攻略中，我们整理了23种CSS垂直居中技巧。这些解决方案运用了不同的CSS属性，包括了定位、flexbox、栅格系统、表格布局等技术。我们可以根据具体布局的需求选择合适的垂直居中方法。

二、解决方案

下面，我们来介绍这23种解决方案。需要特别注意的是，这些技巧并不是互相独立的，有些可以组合起来一起使用。

1、使用line-height进行单行文本垂直居中

.parent {
  height: 100px;
  line-height: 100px;
}

2、使用padding进行单行文本垂直居中

.parent {
  height: 100px;
  padding: 30px 0;
  box-sizing: border-box;
}

3、使用absolute+margin实现多行文本垂直居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  margin-top: -[高度的一半];
}

4、使用absolute+transform实现多行文本垂直居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5、使用flexbox实现垂直居中

.parent {
  display: flex;
  align-items: center;
}

6、使用多重flexbox实现文本垂直居中

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.child {
  align-self: center;
}

7、使用CSS Grid实现垂直居中

.parent {
  display: grid;
  align-items: center;
}

8、使用table元素实现垂直居中

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

9、使用table元素+margin实现垂直居中

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
  margin: auto;
}

10、使用table元素+position实现垂直居中

.parent {
  display: table;
  position: relative;
}
.child {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

11、使用absolute实现不定宽块状元素的垂直居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

12、使用CSS Grid实现两栏布局，并居中其中一栏

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.child {
  justify-self: center;
}

13、使用absolute+margin实现图片垂直居中

.parent {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -[图片高度的一半];
}

14、使用table元素实现多行元素垂直居中

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

15、使用fonsize和height实现需要居中的文本垂直居中

.parent {
  height: 100px;
  font-size: 100px;
  line-height: 1;
}

16、使用margin:auto实现flexbox的成员居中

.parent {
  display: flex;
}
.child {
  margin: auto;
}

17、使用absolute+margin:auto实现flexbox的成员垂直、水平居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

18、使用flexbox+min-height实现比父容器小的元素垂直居中

.parent {
  display: flex;
  align-items: center;
  min-height: 100px;
}
.child {
  margin: auto;
}

19、使用absolute实现比父容器小的元素垂直居中

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
}

20、使用inline-block实现垂直居中

.parent {
  font-size: 0;
  text-align: center;
  height: 300px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

21、使用table实现垂直居中

.parent {
  display: table;
  height: 300px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

22、使用margin:auto实现的二等边三角形垂直居中

#triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #f00;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  margin: auto;
}

23、使用absolute和table实现HTML5 video居中

.parent {
  position: relative;
}
video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: table;
}
source {
  display: table-cell;
  vertical-align: middle;
}

三、示例说明

下面我们以文字垂直居中为例，为你演示如何使用这些技巧进行垂直居中的操作。

示例1：

HTML部分：

<div class="parent">
  <div class="child">
    <h3>Hello World</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada tristique libero vitae rhoncus.</p>
  </div>
</div>

CSS部分：

.parent {
  height: 400px;
  background-color: #f6f6f6;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

这里我们使用的是 absolute + transform 技巧。

示例2：

HTML部分：

<div class="parent">
  <div class="child">
    <h3>Hello World</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada tristique libero vitae rhoncus.</p>
  </div>
</div>

CSS部分：

.parent {
  height: 400px;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 80%;
  text-align: center
}

这里我们使用的是 flexbox 技巧。

通过这两个示例，我们可以发现，当我们需要垂直居中时，需要根据具体情况选择不同的技巧。例如对于多行文本垂直居中，我们可以使用 absolute + margin 或 absolute + transform 技巧。对于单行文本垂直居中，则可以使用 line-height 或 padding 技巧。