垂直居中：CSS盒子的优雅定位

在网页布局中，垂直居中是一个常见的挑战。掌握有效的方法，可以为你的页面增添视觉平衡和美感。让我们深入探讨CSS中垂直居中盒子的常用方式，让你的网页设计更上一层楼！

定位法与Margin

最传统的方法是使用绝对定位和margin属性。通过将盒子定位为绝对，你可以将其从文档流中移除，然后使用margin: 0 auto;将其水平居中。不过，此方法需要预先知道盒子的实际宽高，否则无法正确居中。

定位法与Transform

另一种定位方法是结合transform属性。与margin不同，transform不会影响盒子的布局，因此无需预先知道其宽高。设置定位为absolute，然后使用translate(-50%, -50%)将盒子向左和向上移动50%，即可将其居中。

Flex布局（父元素）

Flex布局为垂直居中提供了更灵活的解决方案。将父元素设置为flex，然后将盒子设置为flex item。使用justify-content: center;属性水平居中，align-items: center;属性垂直居中。这种方法的优点是可以轻松调整盒子的顺序和对齐方式。

Display: Table

display: table;属性可以将一个块级元素转换为表格单元格。由于表格单元格天生垂直居中，因此你可以将盒子设置为table-cell;，并为父元素设置display: table;。此方法适用于需要表格布局的场景，但可能会影响其他元素的布局。

实例：

假设我们有一个宽度为300px、高度为200px的盒子，需要在页面内垂直居中。

使用定位法与margin：

<style>
#box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -150px;
  width: 300px;
  height: 200px;
  background: red;
}
</style>

使用定位法与transform：

<style>
#box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background: blue;
}
</style>

使用flex布局（父元素）：

<style>
#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box {
  width: 300px;
  height: 200px;
  background: green;
}
</style>

使用display: table：

<style>
#parent {
  display: table;
}
#box {
  display: table-cell;
  vertical-align: middle;
  width: 300px;
  height: 200px;
  background: yellow;
}
</style>