margin: 0 auto 对多个块级元素整体无效，因其仅作用于单个块；需将多个块封装为可居中单元：inline-block+text-align兼容性最佳，flex最简洁现代，grid适合精确列控。
多个块级元素并排且整体居中，为什么margin: 0 auto不管用？
因为 margin: 0 auto 只作用于单个块级元素自身，对“多个块”这个整体不起效——浏览器根本不认为它们是一组可居中的单元。你给每个 div 都加 margin: 0 auto，结果是每个都试图占满父容器再居中，最终全部叠在一起或错位。
真正要居中的，是这“多个块”构成的视觉整体，必须先让它们形成一个可被父容器识别的“行内块”或“弹性容器”。
- 别给子元素单独设
margin: 0 auto - 别指望
text-align: center直接作用于div（除非它变成inline-block） - 父容器若已是
display: flex或display: grid，text-align和margin: auto都会被忽略
display: inline-block + text-align: center 最兼容老项目
这是唯一不改变文档流、不破坏原有布局逻辑、且 IE8+ 全支持的方案。核心是把多个块“伪装”成行内内容，再靠父容器对齐整行。
关键操作：
- 父容器设
text-align: center - 每个子块设
display: inline-block（不是inline，否则无法设宽高） - 子块之间留空白符（换行或空格）会生成间隙，可用
font-size: 0或注释删空格解决 - 子块无需设
width，但设了更可控；若用max-width，也生效
示例：
.parent { text-align: center; }<br>.child { display: inline-block; width: 120px; margin: 0 8px; }
display: flex 是现代首选，但要注意父容器副作用
用 justify-content: center 居中所有直系子元素，天然支持多块并排+整体居中，代码最简，响应式友好。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但必须意识到：一旦父容器设了 display: flex，它就不再是普通块级上下文：
- 子元素自动变成 Flex 项目，
float、vertical-align失效 - 子元素的
margin在主轴（水平）方向上仍有效，但auto不再触发居中逻辑 - 如果某个子块写了
width: 100%，它会撑满整个父容器宽度，justify-content对它无效 - 想控制子块间距，优先用
gap（比margin更干净）
示例：
.parent { display: flex; justify-content: center; gap: 12px; }<br>.child { flex: 0 0 auto; /* 防止缩放 */ width: 120px; }
用 display: grid 的前提是明确列数或使用 auto-fit
Grid 适合需要精确控制列数、等宽分布或响应式断点的场景。但直接写 place-items: center 只会让第一个子项居中，不是“多个并排后整体居中”。
正确做法是定义一行多列，并让整行居中：
- 用
display: grid+justify-content: center（注意：不是place-items） - 列定义推荐
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，兼顾固定最小宽和自适应 - 避免写死列数如
repeat(3, 1fr)，否则内容少于3个时会拉伸填满 - 父容器需有足够宽度容纳所有列，否则会换行——这时
justify-content仍只居中当前行
示例：
.parent { display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
真正容易被忽略的是：并排 ≠ 等宽，居中 ≠ 响应安全。无论选哪种方案，都要在小屏下验证是否溢出、换行是否符合预期——inline-block 的间隙、flex 的换行行为、grid 的列计算，全都会在 viewport 缩小时突然翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
