CSS垂直居中方式大搜罗，小白也能掌握！

在网页设计中，垂直居中是一种常见的布局技巧，它可以使页面元素在垂直方向上居中显示，从而提升页面的美观性和用户体验。CSS提供了多种实现垂直居中的方法，每种方法都有其独特的优势和适用场景。在本文中，我们将介绍七种最常用的CSS垂直居中方法，帮助你轻松掌握垂直居中的技巧，让你的页面设计更加出彩。

1. 利用table自带功能

这是最简单也是最常用的垂直居中方法。只需将元素放入一个table元素中，并设置table元素的垂直对齐方式为middle即可。

<table>
  <tr>
    <td valign="middle">
      元素内容
    </td>
  </tr>
</table>

2. 利用100%高度的after、before加上inlineblock

这种方法适合于块级元素，原理是利用伪元素after或before的高度撑开父元素，再将子元素设置为inlineblock即可。

.parent {
  height: 100%;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

3. 利用div装成table

这种方法的原理是将一个div元素设置成table-cell，然后将子元素放入其中即可。

<div style="display: table; height: 100%;">
  <div style="display: table-cell; vertical-align: middle;">
    元素内容
  </div>
</div>

4. 利用margin-top：-50%

这种方法适用于固定高度的元素，原理是将子元素的margin-top设置为负值，使其向上移动一半的高度即可。

.element {
  height: 100px;
  margin-top: -50px;
}

5. 利用flexbox

flexbox是一种强大的布局方式，它可以轻松实现垂直居中。只需将父元素设置为flex容器，并将子元素设置为flex项目即可。

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

.child {
  flex: 1;
}

6. 利用grid

grid是一种新的布局方式，它也可以轻松实现垂直居中。只需将父元素设置为grid容器，并将子元素设置为grid项目即可。

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

.child {
  grid-area: 1 / 1 / 2 / 2;
}

7. 利用transform

transform属性可以用来改变元素的位置，也可以用来实现垂直居中。只需将子元素的transform属性设置为translateY(-50%)即可。

.element {
  transform: translateY(-50%);
}

以上七种方法就是最常用的CSS垂直居中方法，每种方法都有其独特的优势和适用场景。你可以根据自己的需求选择最适合的方法来实现垂直居中，让你的页面设计更加出彩。