如何在CSS中实现Flex元素垂直和水平居中_justify-content align-items结合

P粉602998670 2025-11-21 00:00:00 次阅读

使用Flexbox实现居中需设置父容器display: flex，justify-content: center实现水平居中，align-items: center实现垂直居中，容器需有明确高度，如100vh。

在CSS中，使用Flexbox实现元素的垂直和水平居中非常简单，主要依靠 justify-content 和 align-items 两个属性的配合。

1. 基本原理：justify-content 与 align-items 的作用

要实现居中，先理解这两个属性分别控制什么方向：

justify-content：控制主轴（main axis）上的对齐，通常是水平方向（row）
align-items：控制交叉轴（cross axis）上的对齐，通常是垂直方向

当容器的 flex-direction 为 row（默认值）时，主轴是水平的，交叉轴是垂直的。

2. 实现垂直和水平居中的代码

给父容器设置以下样式即可让子元素居中：

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 100vh;           /* 确保容器有高度 */
}

此时，所有直接子元素会在容器中水平和垂直居中。

3. 实际应用场景示例

比如你想让一个登录框在整个页面居中：

登录内容

CSS 部分：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.login-box {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ddd;
  text-align: center;
}

这样无论屏幕大小如何变化，.login-box 都会保持在视口正中央。