text-align仅控制块级容器内行内内容（文字、图片等）的水平对齐，不能使块级子元素自身居中；HTML5已废弃align属性，必须用CSS实现对齐。
HTML 里没有“通用对齐标签”，所有对齐行为都靠 CSS 控制；用 align 属性（如 <p align="center"></p>）虽然能临时生效，但属于 HTML4 遗留写法，已从 HTML5 标准中移除，现代项目中应避免。
text-align 只影响行内内容，不控制块级子元素位置
很多人误以为给父 <div> 加 <code>text-align: center 就能让里面的 <div> 居中——其实它只对文字、<code><span></span>、<img alt="HTML元素对齐经验的整理分享" >（默认 inline）这类行内内容起作用。
- 如果子元素是块级（如
<div>、<code><p></p>），必须额外设display: inline-block才受text-align影响 - 若子元素是
<img alt="HTML元素对齐经验的整理分享" >，它默认 inline，所以text-align: center确实能让它水平居中 - 对 Flex 或 Grid 容器，
text-align完全无效，因为布局由容器自身属性主导 - 必须设置
width（哪怕width: fit-content），否则auto无法计算左右边距 - 元素不能是
display: inline或float: left，否则脱离正常文档流 - 不能是
position: absolute或position: fixed，此时margin: auto行为完全不同（仅在四边 offset 明确时才居中） - 父容器需有明确宽度（比如不是
width: 100%但父父容器塌陷） -
justify-content控制主轴（默认水平）对齐，align-items控制交叉轴（默认垂直），二者只对直接子元素生效 - 如果父容器高度为
auto（内容撑开），而子元素又没设高，align-items: center在垂直方向可能“没空间可居中” - 子元素若设了
align-self: flex-start，会覆盖父级的align-items - 注意
flex-direction: column会交换主轴/交叉轴含义，此时justify-content控制的是垂直方向
margin: 0 auto 要求元素有明确 width 且为块级流内元素
这是让单个块级元素在父容器中水平居中的最常用方式，但失效场景极多。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Flexbox 的 justify-content 和 align-items 不是“万能居中开关”
很多人一上来就给父元素加 display: flex + justify-content: center + align-items: center，结果发现没效果——问题往往出在容器本身没尺寸或子元素干扰了布局流。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点：对齐从来不是孤立属性，而是容器尺寸、子元素显示类型、文档流状态三者共同作用的结果。调不对，先检查这三项是否隐式冲突，而不是反复换对齐属性。
