text-align: center 只对块容器内的行内级内容（如文字、span、img）水平居中，不影响块级子元素；让块级元素居中需用 margin: 0 auto（要求定宽、块级、正常流）；Flex 布局通过 justify-content 和 align-items 可实现子元素免定位双向居中；表格居中应弃用 align 属性，改用 margin: 0 auto 或父容器 flex。
text-align: center 只对行内内容起作用
给 div 直接加 text-align: center 却没反应？不是样式失效，而是你用错了对象。这个属性只控制块容器内部的**行内级内容**（比如文字、span、img 默认是 inline）的水平对齐，它不会移动 div 自身位置。
常见错误现象：
- 父
div加了text-align: center，子div仍靠左——因为子div是块级元素，不受影响 - 想让图片居中却只给
img加该样式——必须加在它的父容器上
适用场景：
- 段落文字、链接、图标等行内内容水平居中
-
img外层套一个div，给该div设text-align: center
margin: 0 auto 要求块级 + 定宽 + 正常流
这是最经典、兼容性最好的块级元素水平居中方式，但条件很具体：目标元素必须是块级（或 display: block）、有明确宽度、且未脱离文档流。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须设置
width（如width: 300px或width: 60%），不能是100%或auto - 不能是
float、position: absolute或position: fixed元素 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto的行为
示例有效写法：
.box { width: 400px; margin: 0 auto; }如果没居中，先检查这三点有没有漏。
Flex 布局实现真正免定位的双向居中
只要父容器设 display: flex，再配 justify-content: center 和 align-items: center，子元素就能自动水平+垂直居中，完全不需要 position: absolute 或 transform。
优势与注意事项：
- 不依赖子元素尺寸、行数、字体大小，适应性强
- 子元素无需设宽高，
img、button、div都能一视同仁 - 副作用明显：子元素变成 flex item 后，
vertical-align失效，margin: auto在主轴方向被忽略 - 若子元素本身是
width: 100%，它会撑满父容器，justify-content就不起作用了
典型结构：
.container { display: flex; justify-content: center; align-items: center; height: 300px; }注意父容器得有高度（尤其是垂直居中时），否则可能“看不见效果”。
表格居中别用 align 属性，改用 CSS 控制
<table align="center"> 是过时写法，HTML5 已废弃。现代方案分两层：
整张表格在页面中居中：
- 给
table自身设margin: 0 auto（需定宽，如width: 80%） - 或把
table包进一个div，对该div用display: flex + justify-content: center
表格内部单元格内容居中：
- 水平：给
td或th加text-align: center - 垂直：加
vertical-align: middle（注意它只对 table-cell 生效，不是所有元素都支持） - 避免混用旧属性
align/valign，CSS 更可控、可复用
容易被忽略的一点：表格默认是 display: table，它本身不响应 margin: auto 的垂直方向，所以整表垂直居中必须靠父容器布局（flex 或 grid）来完成。
