如何在HTML的div中叠加3个GIF并使其相对div定位且可居中

我正从Wix迁移到Neocities，无法直接迁移页面，需手动重构部分内容。此前找到的实现图片叠加的方法仅能勉强处理两张图片，给div添加align="center"后失效，还无法添加第三张图片叠加。

实际效果中第三张GIF完全超出div范围，且未按预期居中显示，我对CSS尚不熟悉，希望实现div控制内部3个GIF的位置，添加align="center"后即可居中，而非将所有GIF合并为一个文件。

当前代码 #

<title>Work in progress...</title>
<link rel="icon" type="image/x-icon" href="/pages/images/favicons/main.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- CSS and div to make the site logo look the same as the Wix version, modified from stackoverflow
I might just put this into the main style.css, not sure.-->
<style>
.logo {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: relative;
  top: 0;
  left: 0;
}
.image3 {
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>

<div class="logo">
  <img class="image1" src="/pages/images/general/logo/1.gif" />
  <img class="image2" src="/pages/images/general/logo/2.gif" />
  <img class="image3" src="/pages/images/general/logo/3.gif" />
</div>

修复方案 #

核心调整点 #

1. 让容器.logo根据底层图片自适应尺寸，作为上层图片的定位参考
2. 统一上层图片的绝对定位规则，确保它们相对于容器对齐
3. 实现容器的居中效果

修改后的代码 #

<title>Work in progress...</title>
<link rel="icon" type="image/x-icon" href="/pages/images/favicons/main.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<style>
.logo {
  position: relative;
  display: inline-block; /* 让容器尺寸匹配底层图片 */
}
/* 所有叠加图片绝对定位，相对于.logo容器 */
.logo img:not(.base-image) {
  position: absolute;
  top: 0;
  left: 0;
}
/* 底层图片保持默认流，让容器能获取正确尺寸 */
.logo .base-image {
  position: static;
}
</style>

<!-- 用align="center"实现容器居中 -->
<div class="logo" align="center">
  <img class="base-image" src="/pages/images/general/logo/1.gif" />
  <img src="/pages/images/general/logo/2.gif" />
  <img src="/pages/images/general/logo/3.gif" />
</div>

可选优化（纯CSS居中） #

如果更倾向用纯CSS实现居中，可调整.logo样式：

.logo {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto; /* 水平居中 */
}

此时HTML中的align="center"可以移除。

原理说明 #

• position: relative的容器会成为内部绝对定位元素的定位基准，避免上层图片脱离容器范围
• 底层图片使用默认的static定位，确保容器能根据它的尺寸自动计算自身宽高
• display: inline-block或width: fit-content让容器尺寸贴合图片，不会出现空白区域

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