top-50 和 start-50 仅将元素左上角定位到父容器中心，需配合 translate-middle（transform: translate(-50%, -50%)）回拉自身宽高一半才能真正居中，且父容器必须设 position-relative 以确保定位基准正确。
top-50 和 start-50 单独用不会居中，必须配合 position-absolute + translate-middle 才能真正把元素视觉中心对准父容器中心。
为什么 top-50 start-50 自己不居中
这两个类只是设置 top: 50% 和 start: 50%（即 left: 50%），让元素的**左上角**落在父容器中心点。结果是元素从中心点往右下延伸，看起来明显偏右下。常见错误就是只加了 position-absolute top-50 start-50，发现按钮/图标“悬在右下方”，不是正中间。
必须补上 translate-middle —— 它等价于 transform: translate(-50%, -50%)，把元素自身宽高各回拉一半，才能抵消左上角定位的偏移。
父容器必须设 position-relative
绝对定位元素（position-absolute）会相对于最近的「已定位祖先」（position 值不为 static）计算位置。如果漏掉这步，top-50 就可能相对于 <body> 或视口定位，导致在嵌套结构里完全错位。
- 父容器加
position-relative是硬性前提 - 不要依赖 Bootstrap 默认的
.container或.row自带定位 —— 它们默认是position-static - 如果父容器本身是 flex 或 grid 容器，也要显式加
position-relative，否则定位基准会出问题
translate-middle 的三种写法区别
translate-middle 是全向居中；但有时你只需要水平或垂直单向居中，就得选对类：
– translate-middle：同时作用于 x 和 y 轴，等效 transform: translate(-50%, -50%)
– translate-middle-x：仅水平居中，等效 transform: translateX(-50%)，适合配合 top-0 或 bottom-0 做顶部/底部居中条
– translate-middle-y：仅垂直居中，等效 transform: translateY(-50%)，适合配合 start-0 或 end-0 做左/右贴边居中
注意：translate-middle-x 和 translate-middle-y 不会自动补另一轴，别混用或漏写。
容易被忽略的滚动与 z-index 问题
当父容器有滚动（overflow: auto）或内容高度超出视口时，position-absolute 元素仍按父容器尺寸计算 50%，但视觉上可能被截断或错位。这不是类的问题，而是定位上下文本身被裁剪了。
另外，z-index 不会自动生效 —— 只有定位元素（position 不为 static）才参与层叠上下文。如果居中元素被盖住，检查它和兄弟元素是否都在同一层叠上下文中，必要时给父容器加 position-relative z-index: 1。
真实项目里最常踩的坑，不是写错类名，而是忘了设父容器 position-relative，或者误以为 top-50 start-50 自带回拉逻辑。
