父容器加 display: flex 并配合 justify-content: center 和 align-items: center 可实现单子元素居中，但需父容器有明确高度；若无高度，align-items: center 失效，此时可用 margin: auto 实现不依赖父高的一维或二维居中，或多子元素整体居中应选用 justify-content: center 而非 space-between。
直接给父容器加 display: flex，再配 justify-content: center 和 align-items: center，90% 的单子元素居中需求就解决了——但前提是父容器有明确高度。
父容器没设高度，align-items: center 失效
垂直居中依赖交叉轴（默认是 Y 轴）有可参考的尺寸。如果父容器高度由内容撑开，align-items: center 会“找不到参照”，子元素只水平居中、垂直贴顶。
- 加
height: 100vh或min-height: 100vh强制拉满视口高（适合全屏居中） - 用
height: 100%时，确保所有父级（包括html、body）都设了高度 - 不想硬设高度？改用
margin: auto：子元素设position: relative（或保持静态），父容器仍为display: flex，子元素加margin: auto，它会自动在二维方向填满剩余空间并居中
多个子元素想整体居中，别乱用 space-between
justify-content: space-between 把首尾元素顶到两边，中间均分空隙，视觉上并不居中；真正让整组“浮动居中”的是 space-around 或 space-evenly。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
space-around：每个项目两侧空隙相等，首尾项目外侧也有半倍空隙 → 整体更靠近容器中心 -
space-evenly：所有间隙（含首尾外侧）完全相等 → 居中感最干净，但 IE 不支持（需考虑兼容性） - 如果只是想让多个项目在一行里“集体居中对齐”，而不是分散间距，直接用
justify-content: center即可，它们会像一个块一样居中排列
margin: auto 在 flex 容器里比你想得更管用
很多人以为 margin: auto 只能水平居中，其实在 flex 容器中，它同时作用于主轴和交叉轴——只要容器是 display: flex，子元素设 margin: auto 就能无视宽高、不依赖父容器高度，实现绝对居中。
立即学习“前端免费学习笔记（深入）”；
- 子元素不需要设
position: absolute，也不用算负 margin - 即使父容器
flex-direction: column，margin: auto依然生效（此时是垂直主轴，margin: auto控制水平居中） - 注意：这个行为只在 flex 容器内有效；普通块级容器中
margin: auto仅影响水平方向
最容易被忽略的是父容器的尺寸约束——flex 居中不是魔法，它需要一个有界的空间来计算“中”。没有高度、没有 width/height/max-height 的父容器，align-items 和 justify-content 都可能静默失效。动手前先确认容器是否真有可测量的尺寸边界。
