text-align 只作用于行内内容，对块级元素无效；justify-content 和 align-items 才是控制 Flex 容器内元素对齐的真正开关。
text-align 只作用于行内内容，对块级元素无效；justify-content 和 align-items 才是控制 Flex 容器内元素对齐的真正开关。
为什么 text-align: center 对 div 不起作用
很多人试图用 text-align: center 让一个 <div> 在父容器中水平居中，结果失败——因为 <code>text-align 从来就不是为“居中块”设计的，它只影响块内部的**行内内容**（比如文字、<span></span>、<img alt="HTML元素对齐进阶的高阶教程" > 等）的对齐方式。
- 对
<p></p>或<h2></h2>内的文字有效，但不会移动整个<p></p>元素本身 - 对
display: inline-block的子元素有效，前提是父容器有足够宽度且未设置white-space: nowrap干扰换行 - 在 Flex 容器中，
text-align完全被忽略，所有对齐由justify-content/align-items控制
margin: 0 auto 的适用边界在哪
这是最常被误用的“居中技巧”之一。它只对设置了明确 width 的**块级元素**生效，且该元素必须是普通流（non-float, non-absolute, display: block/inline-block）。
- 必须指定
width（哪怕是fit-content或max-content），否则auto水平外边距会坍缩为 0 - 对
display: flex或display: grid子项无效（它们已脱离普通流） - 在 IE8 及更早版本中不支持
fit-content，需用固定值或 JS 回退 - 如果父容器有
text-align: center，而子元素是inline-block，那margin: 0 auto依然无效——此时靠的是父容器的文本对齐
Flex 布局中垂直居中的三类典型写法
垂直居中不是魔法，而是主轴和交叉轴坐标的显式控制。关键看容器的 flex-direction：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 默认
row：主轴水平 →justify-content控制水平，align-items控制垂直 -
column：主轴垂直 →justify-content控制垂直，align-items控制水平 - 想让单个子项独立居中？加
margin: auto到该子项上（仅对 Flex 项目有效）
示例：.container { display: flex; align-items: center; justify-content: center; height: 300px; } —— 这才是可靠、可预测的居中方案。
立即学习“前端免费学习笔记（深入）”；
Grid 布局里 place-items 和 place-self 的实际价值
place-items: center 是 justify-items: center + align-items: center 的简写，但它只影响**所有网格项的默认对齐**；真正灵活的是 place-self，它允许你为单个网格项单独指定对齐方式。
-
place-self: center直接让某一项在单元格内居中，无需额外 wrapper - 它比 Flex 的
margin: auto更精准：不受父容器是否设height限制，也不依赖主轴方向 - 注意兼容性：IE 完全不支持
place-items/place-self，Safari 14.1+ 才稳定支持
复杂布局中，place-self 往往比嵌套 Flex 更轻量——尤其当你已经用 Grid 划分好了区域，只是需要微调其中某个图标或按钮的位置时。
display，整套对齐逻辑就可能重置。别猜，打开开发者工具，看 computed 样式里的 display 和 flex-direction，再动手。
