如何用display:flex实现图片叠加并保持垂直水平居中？
2026-5-29
解决图片叠加并保持flex居中的方案
你现在的问题是两张图片目前是上下排列，没法实现叠加对吧？其实只需要调整一下HTML结构和CSS规则，就能在保留flex居中效果的同时让图片完美叠加。下面给你两种简单可行的方案：
方法一：绝对定位实现叠加（最常用）
首先调整HTML结构，把两张图片放到同一个容器里，不需要额外嵌套div：
<body> <div id="space"> <div class="image-container"> <img id="outerrim" class="layer" src="./assets/css/images/outerrim.png"> <img id="innerrim" class="layer" src="./assets/css/images/innerrim.png"> </div> </div> </body>
然后修改CSS，完善#space的flex属性实现完整的垂直+水平居中，再通过定位让图片叠加：
body, html { height: 100%; margin: 0; } #space { background-image: url("./images/sky.png"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; /* 同时设置水平和垂直居中 */ display: flex; justify-content: center; align-items: center; } .image-container { /* 相对定位作为内部绝对定位的参考容器 */ position: relative; /* 让容器自适应图片尺寸 */ width: fit-content; height: fit-content; } .layer { object-fit: contain; /* 绝对定位让两张图片重叠在同一位置 */ position: absolute; top: 0; left: 0; /* 如需调整图片层级，可添加z-index属性，比如给innerrim设更高值 */ /* z-index: 1; */ }
关键说明：
- 给
#space加上align-items: center后，就能实现垂直方向的居中，之前你只设置了水平居中； .image-container的相对定位是核心，确保内部图片的绝对定位不会脱离容器范围；- 两张图片设置
position: absolute后，会自动重叠在容器的左上角，也就是居中后的位置。
方法二：CSS Grid实现叠加（更简洁）
如果你不想用定位，也可以用Grid布局实现，代码更清爽：
HTML结构和方法一一致，只需要修改CSS：
body, html { height: 100%; margin: 0; } #space { background-image: url("./images/sky.png"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; } .image-container { display: grid; } .layer { object-fit: contain; /* 让所有图片放在Grid的同一个单元格里，自然叠加 */ grid-area: 1 / 1; }
这种方法利用Grid布局的特性，所有设置grid-area: 1 / 1的元素都会被放置在第一个单元格中，自动实现叠加效果，不需要额外的定位规则。
两种方案都能完美实现你想要的效果：两张图片叠加，同时整体在页面中保持垂直水平居中，你可以根据自己的习惯选择其中一种~
内容的提问来源于stack exchange，提问作者Brooke Mortensen
