text-align只对块级容器内的行内内容（如文字、span、img、a）水平对齐有效，对块级子元素（如div、section）无效；设display: block的图片也会使其失效。
HTML元素对齐不是靠某个万能属性一锤定音，而是取决于元素类型、上下文和渲染机制——text-align只对行内内容起作用，margin: 0 auto只对块级元素生效，align-items必须在Flex容器里才管用。选错方法，写一百遍也没用。
text-align 能对齐什么？不能对齐什么？
text-align 只控制**块级容器内行内级内容**的水平对齐，比如 <p></p> 里的文字、<span></span>、<img alt="HTML元素对齐操作的实操指南" >（默认 inline）、<a></a>。它对块级子元素（如 <div>、<code><section></section>）完全无效。
- ✅ 正确用法：
<p style="text-align: center">这段文字会居中</p> - ❌ 常见错误：
<div style="text-align: right"><div>这个div不会右对齐</div></div>—— 因为内部<div> 是块级，<code>text-align对它无感 - ⚠️ 图片是 inline 元素，但若设了
display: block，text-align就失效了；此时得用margin: 0 auto或 Flex - 父容器没设宽度（
width），或宽度是100%——auto需要可计算的剩余空间，100%下没有“剩余” - 元素本身没设
width（或max-width），浏览器无法确定“居中谁”，默认按内容撑开，margin无从分配 - 元素被设了
float、position: absolute/fixed或display: inline-block（未配text-align）—— 这些都会让margin: 0 auto失效 - 行内内容（如单行文字、图标）：用
line-height = 容器高度最快，但仅限单行；多行请改用display: flex; align-items: center - 块级子元素：父容器必须是 Flex（
display: flex）或 Grid（display: grid），然后用align-items: center或place-items: center - 绝对定位元素：用
top: 50%; transform: translateY(-50%)，比top: 50%; margin-top: -XXpx更安全（无需预知高度） - 表格单元格（
<td>）：可用 <code>vertical-align: middle，但注意它只影响单元格内行内/表格子元素，对块级子元素无效别硬套
vertical-align到 div 上——它在非表格上下文中根本不起作用。Flex 容器里 align-items 和 justify-content 容易搞混？记住坐标系
Flex 的两个主对齐属性本质是二维坐标控制：
-
justify-content控制**主轴方向**（默认是水平的row，所以它管左右） -
align-items控制**交叉轴方向**（默认是垂直的，所以它管上下） - 一旦把
flex-direction改成column，两者作用就互换：这时justify-content管上下，align-items管左右
真正容易被忽略的是：如果子元素设了
align-self，它会覆盖容器的align-items；而justify-content没有对应的单个子项控制属性——想单独调整某一项的主轴位置，只能用margin-left: auto或margin-right: auto。 -
块级元素水平居中：margin: 0 auto 不生效的三个原因
写 margin: 0 auto 却不居中？大概率卡在这三处：
实操建议：先确认该元素是否为标准流中的块级元素，再检查父宽 + 自身宽是否都显式定义。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
垂直居中为什么总出问题？关键看容器渲染模式
垂直居中没有通用解法，必须匹配容器的布局上下文：
