外边距合并不直接破坏垂直居中，但用 margin-top: 50% 等手动方式会因父子塌陷、百分比基于 width 计算及兄弟合并而失效；推荐 transform + top、flex 或 table-cell 方案规避。
外边距合并本身不会直接破坏垂直居中，但当你用 margin-top 或 margin-bottom 手动“凑”居中效果时，它会立刻被合并规则干扰——结果就是元素没居中，反而贴顶或下沉得莫名其妙。
为什么 margin-top: 50% 不等于垂直居中？
这是最典型的误用场景：给子元素设 margin-top: 50%，指望它从父容器顶部下移一半高度。问题在于：
- 如果父元素是普通
display: block、无 border/padding、未触发 BFC，且它是第一个子元素，那么这个margin-top会和父元素自身的上外边距（哪怕为 0）发生父子塌陷——实际生效的不是 50%，而是“穿透”到父容器外部，整个父容器被往下推 - 即使没塌陷，
margin-top: 50%的百分比是相对于父容器 width 计算的（不是 height），在非正方形容器里结果完全不可控 - 相邻兄弟元素之间还可能触发兄弟合并，进一步打乱你预设的间距逻辑
用 transform: translateY(-50%) + top: 50% 绕过 margin 合并
这是目前最稳定、不依赖 margin 的垂直居中方案，适用于已知父容器高度或使用相对定位的场景：
- 父元素需设
position: relative - 子元素设
position: absolute; top: 50%; transform: translateY(-50%); - 全程不涉及任何
margin，自然不受合并影响 - 注意：若父容器高度由内容撑开（即无固定 height），该方法仍有效；但若父容器高度为
min-height且内容不足，top: 50% 会以 min-height 为基准计算
flex + align-items: center 是现代布局的首选
如果你能控制父容器的 display 类型，display: flex 是根治方案：
- 父元素设
display: flex; align-items: center;，子元素自动垂直居中，且不依赖任何 margin - 它天然规避所有外边距合并逻辑——因为 flex 项目间的间距由
gap管理，margin在 flex 容器内只作用于自身边界，不参与合并 - 兼容性足够好（Chrome 29+ / Firefox 28+ / Safari 6.1+ / Edge 12+），如需支持 IE11，则降级为
display: table-cell; vertical-align: middle;（需配合display: table父容器） - 别在 flex 容器里再给子元素加
margin-top来“辅助居中”，那又回到合并陷阱里
table-cell 布局在老项目里仍可靠
对必须兼容 IE8–IE11 的遗留系统，display: table-cell 是少有的稳定方案：
- 父容器设
display: table; width: 100%; height: 200px;（需显式 height） - 子元素设
display: table-cell; vertical-align: middle; - 该模型完全不走块级格式化上下文（BFC），因此不存在 margin 合并问题
- 副作用是：子元素变成表格单元格行为，
margin无效，float失效，position: absolute的参照系变为单元格而非父容器
真正容易被忽略的点是：很多开发者试图用 margin 解决垂直居中，本质上是在对抗 CSS 的排版逻辑。与其花时间调试合并规则，不如换一条不碰 margin 的路径——flex、transform 或 table-cell 都比“调大一点 margin-top 再加 overflow:hidden”来得干净且可维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
