使用 justify-content 和 align-items 可实现Flexbox居中对齐。首先设置父容器 display: flex，justify-content 控制主轴（默认水平）对齐，取值 center 实现水平居中；align-items 控制交叉轴（默认垂直）对齐，取值 center 实现垂直居中；两者结合可让子元素完全居中，需确保容器有明确高度，如 height: 100vh。该方法兼容性好、代码简洁，适用于单个或多个子元素的整体居中布局。
在CSS中使用Flexbox实现居中对齐是一种高效且灵活的方法。通过 justify-content 和 align-items 两个属性，可以轻松控制容器内子元素在主轴和交叉轴上的对齐方式，从而实现水平、垂直或完全居中。
理解Flexbox的基本概念
使用Flexbox前，需将父容器设置为弹性布局：
display: flex;此时，容器内的直接子元素成为“弹性项目”，它们的排列由主轴（main axis）和交叉轴（cross axis）决定。默认主轴为水平方向（从左到右），交叉轴为垂直方向（从上到下）。
justify-content 控制主轴对齐
justify-content 用于定义弹性项目在主轴上的对齐方式。常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start：项目向主轴起点对齐（默认）
- flex-end：项目向主轴终点对齐
- center：项目在主轴居中对齐
- space-between：项目均匀分布，首项在起点，末项在终点
- space-around：项目周围留有相等空间
若想让多个按钮在容器中水平居中，可使用 justify-content: center。
align-items 控制交叉轴对齐
align-items 决定项目在交叉轴上的对齐方式，常用于实现垂直居中。常用值有：
- stretch：项目拉伸以填满容器（默认）
- flex-start：项目向交叉轴起点对齐
- flex-end：项目向交叉轴终点对齐
- center：项目在交叉轴居中对齐
- baseline：项目按基线对齐
当容器有固定高度时，设置 align-items: center 可使所有子元素垂直居中。
同时使用实现完全居中
要让一个元素在父容器中水平垂直都居中，只需组合两个属性：
.container {display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保容器有高度 */
}
这种方法适用于单个项目或多项目整体居中，兼容性好，代码简洁，是现代布局中的推荐做法。
基本上就这些，掌握 justify-content 和 align-items 的作用后，Flexbox 居中变得直观又可靠。不复杂但容易忽略的是确保父容器设置了 display: flex 以及具有明确尺寸，否则对齐可能无效。
