如何在可滚动容器中居中div及为可滚动评论父div添加滚动友好覆盖层

嘿，我来帮你搞定这两个问题，咱们一步步来：

问题1：给滚动父容器加不影响滚动的Overlay覆盖层 #

你之前用position: fixed没达到预期，是因为fixed是相对于浏览器视口定位的，而你的父容器是个固定高度的滚动盒子，完全不是一个定位上下文。这里给你两个靠谱的方案：

方案一：Overlay放在父容器内部（不跟着内容滚） #

先给父容器加上position: relative，让它成为Overlay的定位参照物，然后给Overlay设置绝对定位，同时用pointer-events: none让它不拦截父容器的滚动事件（但按钮要单独恢复可点击）：

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; /* 新增，让Overlay以它为基准定位 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(200, 200, 200, 0.7); /* 灰色半透明背景，看着更自然 */
  pointer-events: none; /* 让Overlay不挡着父容器滚动、点击内容 */
  display: flex;
  align-items: center;
  justify-content: center; /* 按钮居中显示 */
}

.overlay .load-more-btn {
  pointer-events: auto; /* 按钮单独恢复可点击 */
  padding: 8px 16px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

对应的HTML结构：

<div class="parent">
  <!-- 这里放你的评论内容 -->
  <div class="comment">这是第一条评论</div>
  <div class="comment">这是第二条评论</div>
  <!-- ...更多评论 -->
  
  <!-- Overlay层 -->
  <div class="overlay">
    <button class="load-more-btn">加载更多评论</button>
  </div>
</div>

方案二：Overlay放在父容器外部（全程固定覆盖父容器） #

如果你希望Overlay完全独立于评论内容，不管怎么滚动评论，它都稳稳盖在父容器的可视区域上，可以加个包裹容器：

.parent-wrapper {
  position: relative;
  width: 100%; /* 或者你需要的宽度 */
}

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(200, 200, 200, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* 确保Overlay在父容器上方 */
}

.overlay .load-more-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

HTML结构：

<div class="parent-wrapper">
  <div class="parent">
    <!-- 评论内容 -->
    <div class="comment">这是第一条评论</div>
    <div class="comment">这是第二条评论</div>
    <!-- ...更多评论 -->
  </div>
  <div class="overlay">
    <button class="load-more-btn">加载更多评论</button>
  </div>
</div>

这个方案里，父容器滚动时，Overlay完全不动，完美覆盖父容器，也不会影响滚动。

问题2：在可滚动容器内部居中另一个div #

分两种场景给你解决方案：

场景1：内容不多，父容器没滚动条时居中 #

如果评论内容高度小于720px，要让内部div水平垂直都居中，直接用Flex布局最省事：

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.center-child {
  width: 80%; /* 可选，给子元素设个宽度，避免太宽 */
  background: #f5f5f5;
  padding: 20px;
}

场景2：内容很多，滚动后仍让子元素在可视区居中 #

如果评论内容超多，滚动时希望某个div始终留在父容器的可视区域中心，可以用sticky定位结合transform：

.parent {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.center-child {
  position: sticky;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: #f5f5f5;
  padding: 20px;
}

这样不管怎么滚动父容器，这个子元素都会乖乖待在可视区域的中心位置～

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