在css中Flexbox垂直居中技巧

使用align-items: center可实现Flexbox垂直居中，结合justify-content: center可同时水平居中，需确保父容器有明确高度，适用于各种内容布局。

在CSS中使用Flexbox实现垂直居中非常简单且高效，尤其适合现代网页布局。只需要几个关键属性，就能让子元素在父容器中完美垂直居中，甚至同时水平居中。

使用align-items垂直居中

如果只想让子元素在交叉轴（通常是垂直方向）上居中，可以使用 align-items: center。

示例：

父容器设置：
display: flex;
align-items: center;

这样，所有直接子元素会在容器中垂直居中。

同时垂直和水平居中：align-items + justify-content

想要子元素在父容器中完全居中（既垂直又水平），需要结合两个属性。

常用组合：

• display: flex
• align-items: center
• justify-content: center

justify-content: center 控制主轴方向（默认是水平）的对齐方式。

单个子元素居中示例

假设有一个卡片或提示框需要居中显示：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 充满整个视口高度 */
}
.content {
  /* 子元素无需特殊设置 */
}

这个方法适用于任何尺寸的内容，包括文字、图片或复杂组件。

注意事项

确保父容器有明确的高度（如 height 设置为具体值或 vh 单位），否则 Flexbox 的居中可能无法正确生效。

flex-direction 改变主轴方向时，align-items 和 justify-content 的作用轴也会相应变化，注意区分主轴与交叉轴。

基本上就这些，Flexbox让垂直居中不再棘手。不复杂但容易忽略细节。