text-align不会让div居中，只控制块级容器内行内内容（文字、img、span）的水平对齐；margin:0 auto需块级+显式width+非flex父容器才水平居中；flex布局中justify-content和align-items仅作用于直接子元素，且依赖正确display类型与上下文。
text-align 不会让 div 居中，margin: 0 auto 不会垂直居中，flex 布局不是万能解——对齐失效，八成是上下文或元素类型没对上。
text-align 只管“里面的内容”，不管“自己在哪”
它只作用于块级容器内部的行内内容（文字、img、span），对子 div 这类块级元素完全无效。
- 错误写法：
.parent { text-align: center; } .child { display: block; }→.child依然贴左 - 正确场景：给
p或label加text-align: center，让里面文字居中 - 单行文字两端对齐必须配
text-align-last: justify，否则text-align: justify在单行下退化为左对齐 - iOS Safari 14.5 以下不支持
text-align-last，低版本会回退，别依赖它做关键排版
margin: 0 auto 要生效，得同时满足三个硬条件
它是最稳的水平居中方案，但漏掉任意一个条件，就完全没反应。
- 元素必须是块级（
display: block或默认块行为），inline或flex子项不认这个规则 - 必须显式设置
width（或max-width），且不能是100%或fit-content（Safari 15.4 前需前缀） - 父容器不能是
display: flex或display: grid，否则auto外边距被忽略 - 常见翻车点：用
width: fit-content后在 Firefox 正常、Safari 偏左——换width: max-content更可靠
flex 布局对齐，align-items 和 justify-content 的作用对象很具体
它们只控制**直接子元素**在主轴和交叉轴上的位置，中间插一层标签、多一个空格、甚至设错 display 类型，都会导致视觉错位。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center水平居中所有直系子项，但若某个子项是width: 100%，它仍会撑满整行，看起来没动 -
align-items: center垂直居中，前提是父容器有明确高度，或子项本身可测量（图片、文本行高可算，空div不行） - 老 iOS Safari（9.3 之前）对
justify-content: center在含图片的单行 flex 中支持不稳，加align-items: flex-start可规避基线干扰 - 按钮内图标+文字对齐，直接给
button设display: flex; align-items: center，比调vertical-align稳得多
vertical-align 不是全局对齐属性，只在特定 display 下起效
它只对 display: inline、inline-block、table-cell 元素有效，用在 div 或 flex 项目上等于没写。
- 图文混排时，
img默认按baseline对齐，文字底部会露一截空白——加vertical-align: middle或text-bottom即可修正 - 字体图标（如
<i class="bi bi-x"></i>）下沉，是因为它继承了文字 baseline，不是 bug；保持display: inline，再微调vertical-align: -.125em或middle - 表格单元格里用
vertical-align，要确认没被tr或table的样式覆盖，默认是vertical-align: middle - 别试图用
vertical-align去“垂直居中一个 div”——那是语义错配，该用 flex 或绝对定位
对齐问题真正难的不是选哪个属性，而是判断当前元素的 display 类型、所处布局上下文、以及浏览器是否悄悄重写了默认行为。动手前先用 DevTools 看一眼 computed 样式里的 display 和 box-sizing，比猜更省时间。
