咱们给个新的思路，用三行CSS就能搞定绝对定位的居中问题。老方法为什么总让人头疼？1.1 之前那种写法固定死了尺寸，还得算负 margin，稍微改改大小就得重来一遍。1.2 四行代码看似省事，低版本IE却直接不支持，一写兼容补丁就变成八行了。1.3 内容动态变化的时候也很容易跑位，要么就得用 JS 去算 margin，要么就硬写最小宽度兜底，性能和可维护性都不行。 那新的三行方案是怎么回事？2.1 先让元素左上角落在父容器的正中间：left: 50% + top: 50%，然后通过 transform: translate(-50%, -50%) 把自己往左上顶回中心——这一步的偏移是相对于自己本身的大小的，所以不管你怎么变高变矮都能稳稳在正中间。2.2 关键点在于 transform 的百分比是看自己的尺寸而不是父容器的宽度。 这个方案有三个大优势：极简、无尺寸限制、兼容性强。它只需要三行代码就搞定了。固定尺寸、自适应还有动态内容都能跑通，写一次就能用很久。对 IE9+ 完全支持，不需要额外前缀，PC 和手机端都能用。 实际用起来挺方便。4.1 固定尺寸居中的话 HTML 里加个定位的父容器，CSS 直接三行核心代码贴上去就行了。结果就是元素稳得很。4.2 动态内容只要把宽高设成 auto 或者 100%，文字、图片随便怎么变，居中逻辑都不需要改。4.3 多层嵌套的情况下只需要给最外层设置 relative，内层用 absolute 就能直接对最外层的父容器居中了。4.4 甚至单方向的居中也能轻松搞定，想左就删掉 top 和 translateY，想右就删掉 left 和 translateX。 有几点需要注意：父容器必须有定位属性才行（relative、absolute、fixed 都行），不然绝对定位就会跑到文档里去了。IE9+ 不用前缀，旧 IE 的话加个 -ms- 前缀就行。这个方法特别适合响应式项目和弹窗这种动态内容布局的场景。 它的好处还在于完全不用 JS 计算性能损耗很小。掌握了这套三行魔法，以后面试或者写项目都不用再为居中问题发愁了。