text-align只对块级容器内的行内内容（如文字、span、img、a）水平对齐有效，对块级子元素（如div、section）无效；设display: block的图片也会使其失效。

HTML元素对齐不是靠某个万能属性一锤定音，而是取决于元素类型、上下文和渲染机制——text-align只对行内内容起作用，margin: 0 auto只对块级元素生效，align-items必须在Flex容器里才管用。选错方法，写一百遍也没用。

text-align 能对齐什么？不能对齐什么？

text-align 只控制**块级容器内行内级内容**的水平对齐，比如

里的文字、、（默认 inline）、。它对块级子元素（如

、

）完全无效。

• ✅ 正确用法：

  这段文字会居中

• ❌ 常见错误：
  这个div不会右对齐
  —— 因为内部
  是块级，text-align 对它无感
• ⚠️ 图片是 inline 元素，但若设了 display: block，text-align 就失效了；此时得用 margin: 0 auto 或 Flex

块级元素水平居中：margin: 0 auto 不生效的三个原因

写 margin: 0 auto 却不居中？大概率卡在这三处：

• 父容器没设宽度（width），或宽度是 100% —— auto 需要可计算的剩余空间，100% 下没有“剩余”
• 元素本身没设 width（或 max-width），浏览器无法确定“居中谁”，默认按内容撑开，margin 无从分配
• 元素被设了 float、position: absolute/fixed 或 display: inline-block（未配 text-align）—— 这些都会让 margin: 0 auto 失效

实操建议：先确认该元素是否为标准流中的块级元素，再检查父宽 + 自身宽是否都显式定义。

垂直居中为什么总出问题？关键看容器渲染模式

垂直居中没有通用解法，必须匹配容器的布局上下文：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 行内内容（如单行文字、图标）：用 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 更安全（无需预知高度）
• 表格单元格（）：可用 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。