使用Flexbox可通过display: flex、justify-content: center和align-items: center三属性组合，使子元素在父容器中水平垂直居中，需确保父容器有明确高度，该方法兼容性好且代码简洁，适用于现代Web开发。
让一个元素在父容器中水平垂直同时居中，曾经是CSS中的经典难题。传统方法如绝对定位加负边距或transform虽然可行，但代码繁琐且不易维护。现在有了Flexbox，这个问题变得非常简单。
使用 Flexbox 实现居中
Flexbox 提供了两个关键属性：align-items 和 justify-content，它们分别控制交叉轴和主轴上的对齐方式。只要合理组合这两个属性，就能轻松实现居中。
基本用法如下：
- display: flex：将容器设置为弹性布局
- justify-content: center：使子元素在主轴（默认为水平方向）上居中
- align-items: center：使子元素在交叉轴（默认为垂直方向）上居中
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保容器有高度 */
}
这样，任何子元素都会在容器中完美居中，无论其尺寸是否已知，也不受内容多少影响。
处理多行或多项目的情况
如果容器中有多个项目，并希望它们整体居中而非分散排列，上述方法依然有效。若需更复杂的布局，比如多行项目也居中对齐，可以加上 flex-wrap: wrap 并使用 align-content: center。
浏览器兼容性与实用性
目前主流浏览器都支持 Flexbox，包括移动端。相比老式定位技巧，Flexbox 更直观、可读性强，适合现代开发。遇到居中需求时，优先考虑使用 display: flex 配合 align-items 和 justify-content，基本上就这些。不复杂但容易忽略的是确保父容器有明确的尺寸，否则无法形成有效的对齐空间。
