使用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. 实现垂直和水平居中的代码
给父容器设置以下样式即可让子元素居中：
立即学习“前端免费学习笔记（深入）”；
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 确保容器有高度 */
}
此时，所有直接子元素会在容器中水平和垂直居中。
3. 实际应用场景示例
比如你想让一个登录框在整个页面居中：
<div class="container"><div class="login-box">登录内容</div>
</div>
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 都会保持在视口正中央。
4. 注意事项
- 父容器必须有明确的高度（如 height: 100vh 或固定值），否则 align-items: center 可能无效
- display: flex 必不可少，这是开启 Flexbox 布局的前提
- 如果子元素是多行，可结合 align-content 使用，但单个项目用 align-items 就够了
基本上就这些。只要记住 justify-content 控制水平、align-items 控制垂直，再配上 flex 容器，居中就不难了。
