如何用CSS定位GIF实现居中？设置position:absolute无效求助

为什么你的定位代码没生效 #

直接给<img>加position:absolute; right:30%没效果，核心原因是：绝对定位元素会相对于最近的非static定位父元素定位，如果父元素没设置position: relative/absolute/fixed，它会默认相对于整个视口定位；再加上仅设置right:30%只是让图片右侧距离视口右侧30%，并非真正的居中逻辑，所以达不到预期效果。

两种可行的居中方案 #

方案一：Flex布局（推荐，简洁易维护）

给图片套一个父容器，用Flex实现水平居中：

<div class="gif-container">
  <img src="img/login.gif" width="20%" alt="登录动画">
</div>

.gif-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  /* 若需要垂直居中，可添加 align-items: center; 同时给容器设置高度，比如 height: 100vh; */
}

方案二：绝对定位实现精准居中

如果一定要用绝对定位，需要给父容器设置定位属性，再调整图片的位置：

<div class="gif-wrapper">
  <img src="img/login.gif" width="20%" alt="登录动画">
</div>

.gif-wrapper {
  position: relative;
  width: 100%; /* 让父容器占满可用宽度 */
}
.gif-wrapper img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
}

也可以替换img的CSS为下面的写法，同样能实现水平居中：

.gif-wrapper img {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

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