求助：无法使两张重叠的同尺寸图片在页面居中显示

我有两张尺寸相同的图片，半透明的logo图片叠加在绿色底图上方，当前显示正常但整体靠左，需要让它们在屏幕上居中，却始终找不到问题所在。

相关HTML代码 #

<div class="portrait-image-wrapper">
    <img src="../image.jpg" class="base-photo"/>
    <img src="../logo.png" class="logo"/>
</div>

对应的CSS代码 #

html,body {
  width: 100%;
  height: 100%;}

.portrait-image-wrapper {
position: relative;
background-size: contain; 
background-repeat: no-repeat;
background-position: center center; 
width: 467px; 
height: 700px;}

.base-photo {
background-repeat: no-repeat;
position: absolute; 
Z-index: 1;}

.logo {
position: absolute; 
top: 0px; 
left: 0px;
z-index: 2;}

尝试过的无效操作 #

曾为.portrait-image-wrapper添加以下属性，但没有效果：

display: flex; 
align-items: center;

问题分析 #

核心问题是没让容器.portrait-image-wrapper本身在页面视口中居中：

1. 给容器加的display: flex和align-items: center是控制容器内部元素垂直居中，和容器自身在页面的位置无关；
2. 容器设置了固定宽高，但没有任何让它在页面水平/垂直居中的样式；
3. 两张图片的position: absolute未设置宽高，可能导致图片尺寸脱离容器控制（即便你说尺寸相同，也建议明确绑定容器尺寸）。

解决方案 #

方法一：Flex布局实现全局居中（推荐）

修改CSS，通过给html/body设置Flex布局，直接让容器在视口中水平+垂直居中：

html, body {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除浏览器默认边距 */
  display: flex;
  justify-content: center; /* 水平居中容器 */
  align-items: center; /* 垂直居中容器 */
}

.portrait-image-wrapper {
  position: relative;
  width: 467px; 
  height: 700px;
  /* 移除无用的background属性，你用的是img标签而非背景图 */
}

.base-photo {
  position: absolute; 
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%; /* 让底图铺满容器 */
  height: 100%;
}

.logo {
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: 2;
  width: 100%; /* 让logo和底图尺寸完全匹配 */
  height: 100%;
}

方法二：绝对定位+Transform居中

如果不想用Flex，也可以通过绝对定位实现容器居中：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative; /* 作为绝对定位容器的父级 */
}

.portrait-image-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过自身偏移实现精准居中 */
  width: 467px; 
  height: 700px;
}

/* 两张图片的样式与方法一一致 */

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