align-items: center必须配合明确高度，因为Flex交叉轴居中依赖容器在该轴上有可计算空间；若父容器height为auto或未设置，浏览器无法确定“中间位置”，该属性将退化为默认顶部对齐。
直接用 display: flex 配合 align-items: center，是最可靠、最易维护的方案。其他方法要么限制多，要么容易在响应式或动态内容下失效。
为什么 align-items: center 必须配合明确高度？
Flex 容器的交叉轴（默认是垂直方向）居中行为，依赖于容器在该轴上有可分配的空间。如果父容器 height 是 auto 或未设置，浏览器无法计算“中间在哪”，align-items: center 就会退化为默认对齐（通常是顶部）。
- 必须给父容器设置具体高度，比如
height: 200px或min-height: 100vh - 用
height: 100%时，要确保所有父级都已设高，否则链路中断 - 若容器高度由内容撑开，又想居中，
flex不适用，得换grid或position + transform
place-items: center 能不能替代 justify-content + align-items？
可以，但要注意浏览器兼容性。它本质是 justify-items: center 和 align-items: center 的简写，在单个子元素场景下效果一致。
- 适用于现代项目（Chrome 68+、Firefox 63+、Safari 12.1+），IE 完全不支持
- 比
flex更简洁：只需display: grid; place-items: center; - 不需要关心主轴方向，
grid天然二维，没有“行/列”方向依赖 - 若父容器内将来可能加多个按钮，
place-items仍会让所有子项一起居中，而flex默认会横向排列它们
绝对定位 + transform 还值得用吗？
仅当需要兼容 IE 10–11 或极老安卓 WebView 时才考虑。它看似灵活，实则暗坑密集。
立即学习“前端免费学习笔记（深入）”；
- 按钮必须脱离文档流，可能影响周边布局逻辑
-
top: 50%; left: 50%; transform: translate(-50%, -50%)要求父容器position: relative，漏写就错位 - 如果按钮宽高动态变化（比如文字长度不定），
transform依然生效，但视觉上可能因字体基线偏移显得“不够正”——这不是代码问题，是排版特性 - 不要用
margin-top: -Xpx替代transform，它要求按钮尺寸完全固定，且难维护
真正容易被忽略的点，是按钮内部文本的视觉居中。哪怕容器级居中完美，单字符如 x 或 × 仍可能看起来偏低——这是字体度量（ascender/descender）导致的，需靠微调 line-height 或改用 flex 布局按钮自身（button { display: flex; align-items: center; justify-content: center; }）来缓解。
