如何在两张并排铺满页面的图片上方添加跨图居中文字？

你可以通过相对定位+绝对定位的方式快速实现需求，无需复杂结构，以下是修改后的完整代码：

修改后的HTML #

<div class="main">
    <img src="city.jpg" class="city" alt="city">
    <img src="couple.jpg" class="couple" alt="couple">
    <!-- 新增的跨图文字容器 -->
    <div class="cross-text">这里是你的跨图文字</div>
</div>

修改后的CSS #

.main {
    display: flex;    
    justify-content: space-between;
    width: 100%;
    height: 152.5vh;
    position: relative; /* 新增：让内部绝对定位元素以当前容器为基准 */
}

.city {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.couple {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cross-text {
    position: absolute; /* 脱离文档流，不影响原有图片布局 */
    left: 50%; /* 水平方向居中对齐容器 */
    top: 50%; /* 垂直方向居中对齐容器 */
    transform: translate(-50%, -50%); /* 让文字自身的中心与容器中心重合 */
    /* 以下为可选自定义样式，按需调整 */
    font-size: 3rem;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    white-space: nowrap; /* 避免文字换行 */
}

关键说明 #

• 给.main添加position: relative，是为了约束内部绝对定位的文字容器，确保文字始终在两张图片的上方区域。
• transform: translate(-50%, -50%)是解决绝对定位元素仅左上角居中的问题，让文字整体真正居中。
• 文字样式完全可自定义，根据图片的色调、排版需求调整颜色、字号、阴影等即可。

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