css盒模型本身不提供垂直居中能力，所有“用盒模型实现垂直居中”的说法本质都是借助布局上下文（如flex、grid、table）或定位机制（如absolute+transform）来操控盒的摆放位置；它只管尺寸计算，不管对齐。
直接说结论：CSS盒模型本身不提供垂直居中能力，所有“用盒模型实现垂直居中”的说法，本质都是借助布局上下文（如flex、grid、table）或定位机制（如absolute + transform）来操控盒的摆放位置。别被“盒模型”这个词带偏了——它只管尺寸计算（content、padding、border、margin），不管对齐。
为什么margin: auto在垂直方向无效？
这是最常被误解的一点。margin: auto在块级元素上仅对水平方向生效，垂直方向完全不起作用，除非满足两个苛刻条件：display为block且父容器是position: absolute或fixed，同时子元素设置了明确的top/bottom值（此时margin: auto才可能触发垂直居中）。日常开发中几乎不会这么用，容易误判。
- 常见错误现象：
.child { margin: auto; }写在普通div里，期望它上下居中——结果毫无反应 - 根本原因：块级盒在正常流中，垂直方向没有“可用空间”供
auto分配；它的垂直外边距会坍缩，不参与布局计算 - 真正起效的场景极少，比如：
position: absolute; top: 0; bottom: 0; margin: auto;，且子元素必须有固定高度
align-items: center为什么有时没效果？
这个属性只在 Flex 或 Grid 容器中生效，不是通用居中开关。它依赖两个前提：父容器必须是 Flex/Grid 上下文，且该上下文要有可测量的交叉轴空间。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 常见错误现象：写了
align-items: center但子元素纹丝不动 - 第一排查点：
display: flex或display: grid是否真加在父元素上？漏写或写错选择器都会失效 - 第二排查点：父容器有没有明确高度？比如
height: 200px或min-height: 100vh。如果父容器高度塌陷（例如内部只有浮动子元素未清除），交叉轴长度为 0，align-items就无处发力 - 第三注意点：子元素不能是
position: absolute——脱离文档流后，它不再是 Flex 项目，align-items对其无效
绝对定位+transform为何能绕过盒模型限制？
它不依赖盒模型的对齐机制，而是靠坐标运算：先把元素左上角挪到父容器中心（top: 50%; left: 50%），再用transform: translate(-50%, -50%)把自己往回拉一半自身宽高。
- 关键优势：不需要知道子元素宽高，响应式友好
- 必要条件：父容器必须设
position: relative（否则top/left会相对于body定位） - 性能提示：
transform触发 GPU 加速，比修改top/margin更流畅；但过度嵌套可能影响渲染层合成 - 兼容性底线：IE9+ 支持，比 Flex/Grid 更老浏览器友好
真正容易被忽略的是：所谓“垂直居中”，从来不是单个 CSS 属性能解决的问题，它始终是布局上下文、盒类型、定位方式三者共同作用的结果。盯着margin或padding调数值，不如先确认你用的是哪种布局模型——这才是起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
