使用Flexbox居中需先设置父元素display: flex；2. justify-content: center实现水平居中；3. align-items: center实现垂直居中；4. 同时使用两者可实现完全居中，配合容器高度即可精确居中子元素。
在CSS中使用Flexbox实现元素居中对齐，是最常用且高效的方法之一。通过设置容器的 justify-content 和 align-items 属性，可以轻松实现水平、垂直或完全居中。
1. 设置Flex容器
要使用Flexbox进行居中，首先需要将父元素定义为Flex容器。
将父元素的 display 属性设为 flex：- display: flex; —— 启用Flex布局
2. 水平居中：justify-content
该属性控制主轴（默认为水平方向）上的对齐方式。
让子元素在主轴上居中：- justify-content: center; —— 子元素在容器中水平居中
3. 垂直居中：align-items
该属性控制交叉轴（默认为垂直方向）上的对齐方式。
立即学习“前端免费学习笔记（深入）”；
让子元素在交叉轴上居中：
- align-items: center; —— 子元素在容器中垂直居中
4. 完全居中：同时使用两个属性
当需要将一个块级元素在父容器中完全居中（既水平又垂直），只需同时设置两个属性。
CSS 示例：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 确保容器有高度 */
}
这样，任何子元素都会在容器中精确居中，无论其尺寸如何。
基本上就这些。只要记住：justify-content 控制横向，align-items 控制纵向，搭配 flex 布局，居中变得非常简单。
