text-align仅对块级容器内行内内容生效，vertical-align仅在表格单元格或table-cell中有效，Flex/Grid需容器与项目配合；div加text-align:center无效常因子元素为块级或flex布局。
HTML元素对齐不能靠猜，必须分清目标元素类型和作用域——text-align 只对块级容器内的行内内容生效，vertical-align 只在表格单元格或 display: table-cell 场景下管用，Flex/Grid 则需整套容器+项目配合。
为什么给 div 加 text-align: center 有时没反应？
因为 text-align 不是“让这个元素居中”，而是“让它的子元素中的行内内容水平居中”。如果那个 div 里塞的是另一个 div（块级），或者设置了 display: flex，text-align 就完全不参与布局计算。
- ✅ 正确场景：父
div包含span、文本、img（默认行内）等 →text-align: center有效 - ❌ 错误假设：父
div里只有一个子div，还指望text-align把它推到中间 → 实际无效，该用margin: 0 auto或 Flex - ⚠️ 常见干扰：子
div设了float或position: absolute，会脱离文档流，text-align更无从作用
td 和 th 里文字垂直居中总偏上？
vertical-align: middle 看似简单，但在表格单元格里常“失灵”，根本原因是它只对单元格内第一层行内盒起作用，且高度依赖行高与 padding 的配合。
- 不要硬设
height: 24px+vertical-align: middle→ 文字会被截或基线错位 - 推荐组合：
padding: 8px 12px+vertical-align: middle，让留白承担垂直空间，比调 height 更鲁棒 - 如果单元格内有
div或多行文本，vertical-align不会穿透进去；需要居中那个div，得单独给它加 Flex 或再套一层table-cell - 注意：
border-collapse: collapse不影响居中逻辑，但双线边框会让视觉中心偏移，建议搭配box-sizing: border-box
用 Flex 实现居中时，为什么 justify-content 没效果？
Flex 居中失效，90% 是因为忘了设容器的 display: flex，或误把样式写在了子元素上。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须写在父容器上：
.container { display: flex; justify-content: center; align-items: center; } - 子元素不能同时设
margin: auto（会覆盖justify-content行为） - 如果父容器宽度为
auto（比如未设宽的div），它会收缩到内容宽度，导致“居中”看起来像没动 —— 此时需确认父容器是否撑满上下文（如加width: 100%或嵌套在已定宽容器中） - 响应式场景下，
flex-direction: column时，justify-content控制的是垂直方向，别和align-items搞反
整表文字居中，但表头 th 还是左对齐？
很多人写 table td { text-align: center; }，却漏掉 th。表头默认样式强，不显式声明就会回退到浏览器 UA 样式（通常是 text-align: center 但 font-weight: bold 干扰判断，实际可能因 UA 差异而左对齐）。
- 务必同时命中：
table td, table th { text-align: center; vertical-align: middle; } - 避免用内联样式逐个写
td，既难维护又易漏th - 如果用了 CSS 预处理器或模块化方案，可抽象为
@mixin table-cell-center统一复用 - 嵌套表格时，外层
table的样式不会自动继承到内层td，需单独作用或用后代选择器table table td
真正容易被忽略的点在于：对齐从来不是单一样式的事，而是容器类型、子元素显示模式、继承链、甚至 UA 默认样式的共同结果。调试时优先检查“这个样式到底作用在谁身上”，而不是反复改参数。
