CSS水平垂直居中解决方案(6种)

CSS水平垂直居中在Web开发中是一个比较常见的问题，这里介绍6种解决方案。下面逐个讲解：

CSS水平垂直居中在Web开发中是一个比较常见的问题，这里介绍6种解决方案。下面逐个讲解：

方案一：Flex布局

使用Flex布局可以很方便地实现水平和垂直居中。步骤如下：

1. 父容器设置 display: flex;
2. 父容器设置 justify-content: center; 和 align-items: center;

示例如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

方案二：绝对定位

使用绝对定位可以实现水平和垂直居中。步骤如下：

1. 父容器相对定位，设置 position: relative;
2. 子容器绝对定位，设置 position: absolute;
3. 子容器设置 top: 50%; 和 left: 50%;
4. 子容器设置 margin-top: -（子容器高度的一半）; 和 margin-left: -（子容器宽度的一半）;

示例如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  background-color: red;
}

方案三：使用table-cell

使用table-cell可以实现水平和垂直居中。步骤如下：

1. 父容器设置 display: table-cell;
2. 父容器设置 vertical-align: middle;
3. 子容器不加特殊样式即可水平和垂直居中。

示例如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 300px;
  text-align: center;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

方案四：使用transform

使用transform可以实现水平和垂直居中。步骤如下：

1. 父容器相对定位，设置 position: relative;
2. 子容器绝对定位，设置 position: absolute;
3. 子容器设置 top: 50%; 和 left: 50%;
4. 子容器设置 transform: translate(-50%, -50%);

示例如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%, -50%);
}

方案五：使用grid布局

使用grid布局可以实现水平和垂直居中。步骤如下：

1. 父容器设置 display: grid;
2. 父容器设置 justify-content: center; 和 align-items: center;
3. 子容器设置 justify-self: center; 和 align-self: center;

示例如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  justify-self: center;
  align-self: center;
}

方案六：使用line-height

使用line-height可以实现水平和垂直居中。步骤如下：

1. 父容器设置指定高度；
2. 子容器设置 line-height: 父容器高度;

示例如下：

<div class="container">
  <div class="box">Hello World</div>
</div>

.container {
  height: 300px;
  text-align: center;
}

.box {
  height: 300px;
  line-height: 300px;
  background-color: red;
  display: inline-block;
}

以上就是6种CSS水平垂直居中的解决方案，具体使用时可以根据实际情况选择合适的方案。