text-align 和 vertical-align 不管用是因为前者只控制行内内容在块级容器中的水平对齐，后者仅对行内元素或表格单元格生效；直接设在 div 上无效，需配合 inline-block、table-cell 或 flex 布局才能正确居中。
text-align 和 vertical-align 为什么不管用
因为 text-align 只控制**行内内容在块级容器中的水平对齐**，vertical-align 则只对**行内元素或表格单元格**生效——直接给一个 div 设置这两个属性，基本没反应。
常见错误现象：div { text-align: center; vertical-align: middle; } 写完发现文字还是左上角贴着；或者用了 display: inline-block 却忘了父容器要清除基线对齐，导致底部留白。
-
text-align: center确实能让子元素里的文字、span、img水平居中，但前提是它们是“行内流”里的内容 -
vertical-align必须配合display: inline-block或table-cell才能起作用，单独设在块级元素上无效 - 如果父容器没有明确高度，
vertical-align: middle在inline-block场景下也容易失效（浏览器按默认行高算中点）
flex 布局是最稳的居中方案
现代项目里，95% 的「水平+垂直居中」需求，用 display: flex 一行 justify-content + 一行 align-items 就搞定，兼容性也早不是问题（IE10+ 支持）。
使用场景：按钮文字、弹窗内容、卡片标题、响应式封面图等需要精确居中的容器。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex，再加justify-content: center（水平）和align-items: center（垂直） - 不需要设置子元素
margin: auto，也不依赖固定宽高 - 注意：如果子元素是多行文本，
align-items: center对齐的是整个元素盒模型，不是每行文字基线 - IE10/11 中
flex有部分 bug（比如min-height失效），可加flex-shrink: 0防缩
div.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
纯 CSS 居中不依赖 flex 怎么办
老项目或需兼容 IE9 及以下时，得用传统方案。最可靠的是「绝对定位 + transform」组合，比负 margin 更安全（不用知道子元素尺寸）。
性能影响很小，但要注意：父容器必须有 position: relative，否则 absolute 会相对视口定位。
- 子元素设
position: absolute; top: 50%; left: 50% - 立刻跟上
transform: translate(-50%, -50%)把自身中心拉回原点 - 别用
margin-top: -XXpx，一旦字体缩放或内容变多，偏移就错位 - 如果子元素是图片，记得加
max-width: 100%防溢出，transform不影响文档流，不会触发重排
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
table-cell 方案现在还值得用吗
可以，但仅限于你已经用 display: table 做布局，或必须兼容极老环境（如 IE8）。它语义不清、灵活性差，现代开发中属于“能不用就不用”的选项。
参数差异明显：vertical-align: middle 在 table-cell 下才真正起作用，且会把内容按单元格内容区垂直居中（不是按父容器高度）。
- 父容器设
display: table-cell; vertical-align: middle; text-align: center; - 必须同时设
width和height，否则table-cell高度由内容撑开，居中效果不可控 - 子元素不能再设
display: block以外的值，否则破坏表格行为 - 和
flex相比，它无法响应式收缩，也不能用gap或flex-wrap
真正容易被忽略的是：居中不是孤立操作，它总依赖上下文——父容器有没有高度？子元素是否脱离文档流？是否开启了缩放或 font-size 调整？这些细节一动，居中就偏。别背代码片段，先看盒模型怎么走。
