完美实现CSS垂直居中的11种方法

在Web开发中，垂直居中一直是一个比较棘手的问题。无论是在响应式设计还是固定宽度布局中，了解如何快速有效地实现垂直居中是非常有用的。本文将介绍11种完美实现CSS垂直居中的方法，让你在布局中更加得心应手。

1. Flexbox

Flexbox 是一个非常有效的 CSS 布局模型，它提供了很多有用的特性，包括垂直居中。使用 display: flex 和 align-items: center，将子元素垂直居中。

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

2. Grid

Grid 是一种新的 CSS 布局模型，可以更加方便地实现网格布局和垂直居中。使用 display: grid 和 align-items: center，将子元素垂直居中。

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

3. Line-Height

对于内联块级元素、图片等，可以使用文本对齐属性和行高实现垂直居中。

.parent {
  line-height: 100px; /* 父元素高度 */
  text-align: center;
}
.parent img {
  vertical-align: middle;
}

4. Absolute Positioning

使用绝对定位，可以相对于父元素垂直居中。设置顶部和底部边距相等，并将上下外边距设置为自动。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 子元素一半高度 */
}

5. Transform

使用 transform 可以实现元素相对于自身垂直居中。设置 translateY(-50%) 将元素向上移动一半高度。

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

6. Flexbox + Margin Auto

使用 Flexbox 和自动边距，可以实现父元素和子元素垂直居中。

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

7. Inline Flexbox

使用 display: inline-flex 可以让 Flexbox 作用于内联元素。

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

8. Table-Cell + Vertical-Align

使用表格单元格的布局方式，可以很容易地实现垂直居中。

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

9. Grid + Place-Items

使用 Grid 的新特性 place-items: center 可以快速实现垂直居中。

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

10. Grid + Span

使用 Grid 的 span 属性，可以实现元素垂直居中。

.parent {
  display: grid;
}
.child {
  grid-row: 2 / span 1;
}

11. Pseudo Element

使用伪元素，可以将子元素绝对定位并相对于父元素垂直居中。

.parent {
  position: relative;
}
.parent::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上是11种可以完美实现CSS垂直居中的方法。根据自身布局需求选择适合的方法，可以让你的布局更加完美。