使用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用于控制子元素在交叉轴（与主轴垂直的方向）上的对齐。如果主轴是水平的，交叉轴就是垂直的。虽然它不直接影响水平居中，但在需要同时居中时非常有用。
立即学习“前端免费学习笔记（深入）”；
常见取值包括：
-
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可应对更多布局需求。
