使用Flexbox实现水平居中需设置父容器display: flex和justify-content: center，若需垂直居中可同时设置align-items: center。

在CSS中实现水平居中，使用Flexbox是一种高效且现代的方法。关键在于理解justify-content和的作用，并正确应用它们。

justify-content 控制主轴对齐（实现水平居中）

当容器设置为display: flex;时，子元素默认沿主轴（通常是水平方向）排列。justify-content用于控制子元素在主轴上的对齐方式。要实现水平居中，应将该属性设置为center。

示例代码：

.container {
  display: flex;
  justify-content: center; /* 子元素在主轴（水平方向）上居中 */
}

此时，所有子元素会在容器内水平居中排列。

align-items 控制交叉轴对齐（垂直居中辅助）

align-items用于控制子元素在交叉轴（与主轴垂直的方向）上的对齐。如果主轴是水平的，交叉轴就是垂直的。虽然它不直接影响水平居中，但在需要同时居中时非常有用。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

常见取值包括：

• flex-start：顶部对齐
• center：交叉轴居中
• flex-end：底部对齐

若希望内容完全居中（水平+垂直），可结合两个属性：

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

实际应用场景建议

在实际开发中，Flex布局适合用于导航栏、卡片布局、模态框内容居中等场景。

注意事项：

• 确保父容器设置了display: flex;
• 主轴方向默认为row（从左到右），如需改变可用flex-direction
• 子元素不会自动换行，如需多行居中可考虑justify-content: space-around或结合flex-wrap使用

基本上就这些，掌握justify-content: center就能轻松实现水平居中，再搭配align-items可应对更多布局需求。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！