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