如何将两张重叠的透明PNG图片作为整体居中？

要让两张重叠的图片作为一个整体居中，核心是将两张图片包裹在一个容器内，先让容器居中，再让图片在容器内重叠。你之前的问题大概率是没有给容器设置合适的定位和尺寸，导致容器无法被正确居中。

以下是两种可行的解决方案：

方法一：Flex布局（推荐，适配性更强） #

在styles.css中添加以下代码：

/* 重置body默认边距，若需要垂直居中则设置视口高度 */
.body {
  margin: 0;
  min-height: 100vh;
  /* 让body成为flex容器，实现内部元素的水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 包裹图片的容器，设置相对定位作为内部绝对定位元素的基准 */
.top-container {
  position: relative;
  /* 尺寸设置为两张图片中较大的那张的宽高，请根据实际图片调整数值 */
  width: 500px;
  height: 600px;
}

/* 让两张图片重叠 */
.goku, .dbzlogo {
  position: absolute;
  top: 0;
  left: 0;
}

方法二：传统margin居中 #

如果仅需要水平居中，可使用这种方式：

.body {
  margin: 0;
}

.top-container {
  position: relative;
  width: 500px;
  height: 600px;
  /* 水平居中容器 */
  margin: 0 auto;
  /* 如需垂直居中，可添加：margin-top: calc(50vh - 300px); 300为容器高度的一半 */
}

.goku, .dbzlogo {
  position: absolute;
  top: 0;
  left: 0;
}

关键说明： #

1. 必须给.top-container设置position: relative，否则内部绝对定位的图片会以body为基准，无法形成一个独立整体。
2. 容器必须设置明确的宽高（匹配图片尺寸），否则容器会因内部图片脱离文档流而缩成0宽0高，无法被居中。
3. 两张图片用position: absolute重叠后不再占用文档流空间，因此居中的对象是包裹它们的容器，而非单张图片。

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