使用position:absolute时如何让可显隐元素始终屏幕居中显示

你当前用position: absolute做定位的话，要注意一个核心前提：absolute定位是相对于最近的非static定位祖先元素计算偏移的，如果要让图片始终对齐用户屏幕（视口），优先把定位属性改成position: fixed，能直接规避父级定位、页面滚动带来的偏移问题；如果必须用absolute，要保证该图片的所有祖先元素都没有设置relative/absolute/fixed/sticky定位，否则无法对齐屏幕。

两种可直接复用的CSS写法，按需选择即可：

• 通用无感知方案（不需要提前知道图片尺寸，兼容所有现代浏览器）

.target-img {
  position: fixed; /* 需用absolute就替换掉这行，确认无定位父级即可 */
  top: 50%;
  left: 50%;
  /* 把元素往左上偏移自身宽高的一半，对齐视口中心 */
  transform: translate(-50%, -50%);
  /* 按需设置层级，避免被其他页面元素遮挡 */
  z-index: 999;
}

这个写法不需要提前给图片设置固定宽高，不管图片实际尺寸是多少、后续是否替换资源，都能自动居中，适配性最好。

• 固定尺寸兼容方案（已知图片宽高，兼容极低版本浏览器）
  如果你已经确定图片的固定宽高，比如宽480px、高320px，可以用负margin写法，兼容性覆盖到IE8及更早版本：

.target-img {
  position: fixed;
  width: 480px;
  height: 320px;
  top: 50%;
  left: 50%;
  /* 负margin值为对应宽高的一半 */
  margin-left: -240px;
  margin-top: -160px;
  z-index: 999;
}

注意事项 #

• 控制图片显隐直接切换display: none/display: block即可，居中逻辑不会受显隐状态影响，图片显示时会自动出现在屏幕正中间。
• 如果用position: absolute实现，页面滚动时图片会跟着文档流一起移动，不会固定停留在屏幕上，要做固定悬浮的居中效果必须用position: fixed。
• 图片加载过程中如果尺寸未确定可能出现短暂偏移，可以提前给图片设置width/height或者aspect-ratio属性预留占位，避免抖动。

内容的提问来源于stack exchange，提问作者user16430735