top百分比在absolute/fixed下按包含块高度计算，relative下则按自身高度计算；margin-top百分比一律按包含块宽度计算；transform: translate()百分比始终参照自身宽高。
top 百分比是按父容器高度算的，但有个前提
只有当元素 position 为 absolute 或 fixed 时，top: 50% 才真正参照**包含块（containing block）的高度**计算。这个“包含块”通常是最近的、position 不为 static 的祖先元素（比如 position: relative 的父容器），且其高度必须可计算——即不能是 height: auto 且未被内容撑开。
常见错误现象：top: 50% 没效果，或偏移量远小于预期。往往是因为父容器没有显式设置 height，或者高度由子内容撑开，导致“包含块高度”为 0 或不可靠。
- 如果父容器
height是auto，而子元素又不是绝对定位，top百分比会被忽略（计算值为auto） -
top百分比始终基于包含块的height，和自身尺寸无关——这点和transform: translate()完全不同 - 包含块的“高度”包含
padding，但不包含border和margin（W3C 规范定义为 padding box）
relative 定位的 top 百分比其实是按自己高度算的
这是最容易踩坑的地方：position: relative 下的 top: 50% 并不看父容器，而是拿**元素自身的 height** 当基准。如果该元素高度是 auto（比如普通块级元素没设高），那自身高度就是 0，top: 50% 就等于 top: 0，完全没偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别指望用
relative + top: 50%做垂直居中——它移动的是自己上边缘，不是中心点 - 若真要用，必须先确保元素有明确
height（如height: 40px、height: 10vh，或 flex 子项的固有高度） - 对比：同样写
top: 50%，absolute子元素会下移父高一半，relative子元素只下移自己高一半，二者数值通常差很多
margin-top 百分比为什么总按父宽度算？
margin-top: 50% 看起来像“向上挪父容器一半高度”，实际却是 父容器 width × 50%。W3C 明确规定：所有方向的 margin 和 padding 百分比，一律以**包含块的 width** 为基准。
原因很实际：早期布局中宽度更稳定，高度常由内容决定；统一用 width 计算能避免循环依赖（比如 height 依赖 margin，margin 又依赖 height）。
- 即使你写的是
margin-top或padding-bottom，也照样用父宽算 - 如果父容器 width 是
auto（比如未设宽的 block 元素），百分比 margin/padding 行为未定义，浏览器可能按 0 处理 - 想让垂直间距随高度变化？改用
vh单位，或 JS 动态计算，别硬套百分比
translate() 的百分比和所有这些都不同
transform: translate(50%, 50%) 的两个百分比，分别参照**元素自身的 width 和 height**，和任何父容器都无关。这也是它能可靠实现居中的根本原因——不需要父容器设高，也不怕 margin/padding 干扰。
但要注意：
-
translate(-50%, -50%)是把元素中心对齐到起点，不是把左上角对齐 - 如果元素
height是auto，translateY(50%)仍会生效，因为浏览器在 layout 阶段就能确定最终高度（哪怕由内容撑开） - 它不触发重排，只影响绘制层，性能比 top/left 更优，但无法参与文档流布局
真正复杂的不是规则本身，而是不同属性的“百分比”根本就不是同一个东西——top 看父高，margin-top 看父宽，translateY 看自己高，left 看父宽，relative 的 left 却看自己宽。混用时务必确认当前上下文里哪个尺寸才是真正的参考系。
