text-align仅控制行内内容水平对齐，不影响块级元素自身位置；块级元素居中需用margin: 0 auto（需设宽度）或flex布局（justify-content与align-items配合）。
text-align 只管文字和行内元素的水平对齐，不管块级元素本身的位置；想让 div 或 img 这类块级元素“挪到中间”，得换别的方法。
text-align 为什么没让 div 居中？
这是最常踩的坑：text-align: center 加在父容器上，子 div 依然贴左——因为 text-align 不作用于块级子元素，只影响它内部的文本、span、img（当它们是行内时）等。
常见错误现象：
- 给
body加了text-align: center，以为整个页面都居中了 - 给
div自己加text-align: center，结果只是里面文字居中，盒子边框还是靠左
真正该用的场景：
- 段落
p内文字居中 - 标题
h2文字右对齐（比如阿拉伯语或金额列） - 按钮内文字居中（
button是行内块，text-align有效）
让块级元素自身居中：margin: 0 auto 的硬性条件
这个方法简单，但失效频率极高，原因几乎总是没满足两个前提：
- 元素必须是块级（默认就是，但若被设成
display: inline或flex就不行） - 必须显式设置宽度，比如
width: 320px或max-width: 80%；width: fit-content或未设宽度的width: auto都不生效
典型写法：
.card {
width: 400px;
margin: 0 auto;
}
注意：如果父容器 width 小于子元素，居中不可见；移动端需配合 box-sizing: border-box 避免 padding 撑破宽度。
Flex 布局居中：主轴和交叉轴别搞混
justify-content 控制主轴（默认水平），align-items 控制交叉轴（默认垂直）。两者缺一不可才能真正“居中”。
常见误区：
- 只写
justify-content: center，没写align-items: center→ 水平居中了，但垂直方向仍靠上 - 父容器没高度（比如只有
min-height: 100vh却忘了设），align-items看不出效果 - 在 iOS 9.3 之前的 Safari 中，
justify-content: center对图片或带vertical-align的元素支持不稳定，建议加align-items: flex-start显式重置
最小可用代码：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
表格单元格里数字右对齐还错位？字体才是关键
单纯给 td 加 text-align: right，金额或编号仍会小数点不齐——因为默认字体（如 sans-serif）不是等宽，1 和 0 宽度不同。
必须同步控制字体：
- 用等宽字体：
font-family: 'Consolas', 'Courier New', monospace - 避免用 HTML5 已废弃的
align="right"属性，Firefox 新版直接忽略 -
vertical-align: middle在表格里常“没效果”，本质是单元格没留出足够空间；加padding: 8px 12px比硬设height更安全
复杂单元格（含图片或按钮）建议改用 display: flex; align-items: center，但慎用于整表——大量 flex 会拖慢渲染。
最容易被忽略的一点：所有对齐行为都依赖于父容器的尺寸和文档流状态。一旦用了 position: absolute、float 或 display: contents，上面说的 margin: 0 auto 和 flex 都可能失效——先检查布局上下文，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
