Flex容器内元素居中需同时设justify-content:center和align-items:center；前者控制主轴（默认水平）居中，后者控制交叉轴（默认垂直）居中，且父容器必须为display:flex并有明确高度。
用 align-items 和 justify-content 控制 Flex 容器内对齐
纯 HTML 标签本身不提供响应式对齐能力，必须配合 CSS 的 Flexbox 或 Grid 才能实现。最常用、兼容性最好的方式是给容器加 display: flex，再用 align-items（垂直）和 justify-content（水平）控制子元素位置。
常见错误是直接在 <div> 上写 align="center" —— 这个 HTML 属性只对表格单元格或旧版表单控件有效，对现代布局无效，且在 HTML5 中已废弃。
-
justify-content: center水平居中（主轴），适用于flex-direction: row（默认） -
align-items: center垂直居中（交叉轴），需确保父容器有明确高度（如min-height: 100vh）或内容撑开 - 响应式切换时，建议用媒体查询重设值，例如小屏改用
justify-content: flex-start避免文字溢出
用 text-align + margin: auto 实现行内级内容居中
当内容是纯文本、图片或 <span> 等行内元素时，text-align: center 可让它们在块级父容器中水平居中；若要同时垂直居中，需配合 line-height（单行）或 display: table-cell + vertical-align: middle（多行）。
但注意：margin: auto 对行内元素无效，只对设置了 display: block 且有明确宽度的块级元素起作用。
立即学习“前端免费学习笔记（深入）”；
- 单行文本垂直居中：父容器设
line-height等于容器高度，再加text-align: center - 图片水平居中：给
<img>加display: block和margin: 0 auto - 避免滥用
vertical-align: middle在非table-cell或inline-block元素上——它不会产生预期效果
用 grid 布局实现二维响应式对齐（推荐新项目）
CSS Grid 更适合复杂对齐场景，比如“标题左对齐、按钮右对齐、中间内容居中”，且天然支持响应式断点切换模板。
关键点在于：Grid 不依赖内容流方向，justify-items 和 align-items 是容器级控制，而 justify-self / align-self 可单独调整某个子项。
- 基础居中：容器设
display: grid+place-items: center（等价于justify-items: center; align-items: center） - 响应式变化：在
@media (max-width: 768px)中改用grid-template-columns: 1fr+text-align: left恢复阅读习惯 - IE11 不支持现代 Grid（
display: grid），如需兼容，得降级到 Flex 方案
移动端 Safari 中 flex 垂直居中失效的典型原因
不少人在 iOS Safari 上发现 align-items: center 不生效，页面内容贴顶——这通常不是代码写错，而是 Safari 对 min-height: 100vh 的解析问题：它会把地址栏高度算进 vh，导致容器实际高度不足。
- 临时修复：用
min-height: -webkit-fill-available替代100vh（仅 Safari 支持） - 更稳妥方案：用 JS 动态设置高度，如
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，CSS 中用min-height: calc(var(--vh, 1vh) * 100) - 别忽略
flex-shrink: 0：子元素内容过长时可能被压缩变形，显式设为0可防止意外缩放
实际对齐效果是否稳定，往往取决于容器是否有可计算的高度上下文、是否触发了 BFC、以及目标浏览器对单位（尤其是 vh）的实现差异——这些细节比写对属性名更容易决定成败。
