Flexbox实现页面元素居中的核心是设置容器display: flex及对齐属性：一、单子元素用justify-content和align-items居中；二、多子元素用space-around等均分间距；三、用margin: auto使子元素绝对居中；四、响应式需结合媒体查询与flex-wrap；五、文本居中需注意white-space与宽高设置。
如果您希望在HTML5中使用Flexbox实现页面元素的灵活排版与精确居中，核心在于正确设置容器的display属性及对齐方式。以下是几种典型场景下的具体实现方法：
一、单个子元素水平垂直居中
该方法适用于容器内仅有一个子元素，通过设置容器为flex并启用主轴与交叉轴居中，可使子元素在二维空间内完全居中。
1、为父容器添加CSS样式：display: flex;
2、添加justify-content: center; 实现主轴（默认为水平方向）居中
立即学习“前端免费学习笔记（深入）”；
3、添加align-items: center; 实现交叉轴（默认为垂直方向）居中
4、确保父容器具有明确的高度，例如height: 100vh;，否则垂直居中可能无效
5、子元素无需设置宽高或margin，其尺寸由内容自然决定，居中效果由父容器控制
二、多子元素沿主轴等距分布并整体居中
该方法用于多个子元素需在一行（或一列）中均匀排列，且整组元素在容器内水平（或垂直）居中的场景，依赖于justify-content的不同取值组合。
1、将父容器设为display: flex;
2、设置flex-direction: row;（默认值，可省略）或flex-direction: column;以确定主轴方向
3、使用justify-content: space-around; 或 justify-content: space-evenly; 实现子元素间距均分
4、若需整组元素在容器中居中而非贴边，应避免使用space-between；space-around会在首尾元素外侧保留半倍间距，视觉上更接近居中效果
5、为防止换行干扰布局，可添加flex-wrap: nowrap;（默认值）
三、子元素自身在容器内绝对居中（脱离文档流仍生效）
此方案不依赖父容器高度是否已知，利用flex的align-self与margin: auto配合，使特定子元素突破常规流式限制，实现独立居中。
1、父容器设置display: flex; 和 height: 100%;（或任意有效高度）
2、目标子元素设置margin: auto;
3、移除该子元素上可能存在的float、position: absolute等影响块级布局的样式
4、若父容器为flex且子元素未设置flex属性，margin: auto会同时作用于上下左右四个方向，强制其在父容器内完全居中
5、该技巧对单个子元素最可靠，多个子元素同时设margin: auto可能导致不可预期的间距压缩
四、响应式居中——适配不同屏幕宽度的flex容器
为确保在移动设备与桌面端均能保持居中效果，需结合媒体查询与flex属性动态调整，重点控制主轴方向与换行行为。
1、基础容器声明display: flex; justify-content: center; align-items: center;
2、添加flex-wrap: wrap; 允许子元素在空间不足时换行
3、在小屏幕下使用@media (max-width: 768px) { } 包裹覆盖规则
4、在媒体查询内将flex-direction设为column; 并保留justify-content: center;
5、此时所有子元素转为垂直堆叠，每项仍保持水平居中，整体结构自适应无错位
五、文本内容在flex容器中精准居中
当容器内仅含纯文本或内联元素时，需注意flex布局与文本对齐机制的协同，避免line-height或white-space导致偏移。
1、父容器设为display: flex; height: 200px;（设定固定高度）
2、添加align-items: center; 实现垂直居中
3、添加justify-content: center; 实现水平居中
4、子元素为或直接文本节点时，无需额外设置text-align
5、若文本过长换行，应添加white-space: normal; 并确保容器width足够，否则align-items可能失效
