新手求教：如何让wrapper元素滚动页面时始终保持居中？

你的代码核心问题出在.wrapper的尺寸设置上：给它设了width:100vw和height:100vh后，再叠加margin:50px，元素总尺寸会超出视口范围，导致右侧和底部被浏览器截断，看起来像是紧贴边缘。

下面是两种可行的修改方案：

方案一：通过定位边距直接控制尺寸 #

这种方式最简单，直接用top/left/right/bottom定义wrapper和视口的间距，浏览器会自动计算宽高：

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden; /* 避免溢出产生滚动条 */
}

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 替代无效的background-size，让图片铺满容器且保持比例 */
}

.wrapper {
    position: fixed;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    background-color: #38323283;
    border-radius: 45px;
    box-shadow: 3px 3px 4px #00000040, -3px -3px 4px #00000040;
}

方案二：用calc计算尺寸 + transform居中 #

如果需要更灵活的尺寸控制，可以用calc减去边距，再通过transform实现精准居中：

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper {
    position: fixed;
    width: calc(100vw - 100px); /* 左右各50px，总边距100px */
    height: calc(100vh - 100px); /* 上下各50px，总边距100px */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 基于自身中心居中 */
    background-color: #38323283;
    border-radius: 45px;
    box-shadow: 3px 3px 4px #00000040, -3px -3px 4px #00000040;
}

关键修改点说明 #

1. 移除了.bg img中无效的background-size，改用object-fit:cover适配图片标签的尺寸。
2. 给html/body添加overflow:hidden，防止元素溢出产生不必要的滚动条。
3. 调整.wrapper的尺寸计算方式，避免超出视口范围，同时保证上下左右50px的边距和居中效果。

内容的提问来源于stack exchange，提问作者Ánh Nắng Của Em