滚动图片时Header Div无法保持居中的技术问题求助

云上老周

2026-6-20

问题原因

你当前用position: sticky; left: 50%; transform: translateX(-50%)实现的居中是基于浏览器视口的。当浏览器窗口宽度小于图片宽度、横向滚动页面时，视口的水平位置发生偏移，此时left:50%对应的是当前视口的中点，不再是整个页面的中点，导致Header跟着偏移。

解决方案

给Header套一个和图片容器同宽的父容器，让父容器作为sticky定位的载体，Header在父容器内居中。这样父容器会随页面横向滚动，Header始终保持在页面的中心位置，同时保留图片原有宽高。

修改后的代码

CSS：

.text{
    text-align:center;
}

/* 新增的Header父容器 */
.header-wrapper {
    position: sticky;
    top: 0;
    width: 1350px; /* 和图片容器#div的宽度一致 */
    margin: 0 auto; /* 父容器在页面中居中 */
}

#header {
    width: 200px;
    height: 160px;
    margin: 0 auto; /* Header在父容器内居中 */
}

#div{
    position: relative;
    margin: auto;
    height: 675px;
    width: 1350px;
    border: 5px solid black;
    background:gray;
}

#image{
    position:relative;
    height:675px;
    width:1350px;
}

HTML：

<div class="header-wrapper">
    <div id="header">
        <h1 class="text">Title</h1>
        <h3 class="text">SubTitle</h3>
        <h2 class="text">SubTitle</h2>
    </div>
</div>

<div id="div">
    <img id="image" src="https://media.istockphoto.com/id/1411569800/photo/fluttering-blank-white-flag-on-flagpole-isolated-on-black-background.jpg?s=612x612&w=0&k=20&c=Nn74uzTU1_VWvGBdgr0Fk6Ahmqfj5ZX51WHjF1Vodts=">
</div>