绝对定位居中必须父容器设position: relative，否则top:50%和left:50%会相对于视口而非父容器；仅设top/left仅移动左上角至中心，须加transform: translate(-50%, -50%)使几何中心对齐。

transform 配合 position: absolute 更稳，但前提是父容器必须设 position: relative——漏掉这一步，再“稳”的写法也会失效。

为什么只写 top: 50% 和 left: 50% 不行

这只是把元素左上角挪到父容器中心点，结果是整个元素偏右下。常见错误现象：弹窗右上角卡在屏幕中央、文字顶部对齐中线但下半截悬空。必须补上 transform: translate(-50%, -50%) 才能真正让几何中心对齐。

position: relative 是硬性前提，不是可选项

因为 position: absolute 的定位参考系是「最近的已定位祖先」。默认 position: static 不算已定位，浏览器会一路往上找，最终落到 body 或视口上。所以：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器哪怕只是个空 <div>，也得加 <code>position: relative
• 如果父容器本身用了 display: flex 或 grid，依然要加——布局方式不等于定位上下文
• 嵌套弹窗场景中，中间某层漏了 position: relative，深层子元素就会漂移

transform: translate(-50%, -50%) 的百分比怎么算

它按元素**当前渲染后的宽高**计算，不是父容器尺寸，也不是初始 CSS 声明值。这意味着：

• 文字换行、图片加载、字体缩放、em/rem 动态变化，都不影响居中效果
• 如果子元素是 inline（比如 <span></span>），IE11 下需先加 display: inline-block 或 block
• 不要和父级 transform（如 scale()、rotate()）混用，否则会叠加导致偏移

别碰 top: 0; bottom: 0; left: 0; right: 0; margin: auto 这套

它在绝对定位下行为不可靠：

• 只有当子元素有明确 width 和 height（不能是 auto）时才可能生效
• 多行文字、SVG、未设宽高的图片、fit-content 布局，全都会撑满父容器或错位
• 垂直方向上，多数浏览器根本不响应 margin: auto，调试时很难定位问题根源
真正容易被忽略的是：只要有一层祖先元素带 transform 或 overflow: hidden，就可能悄悄改变「包含块」，让 absolute 的参照系切换——而 translate(-50%, -50%) 还在按原逻辑算，结果就偏了。