中心绝对定位溢出div

Question

这就是我尝试过的方法，它可以使我99％达到目标。

.polaroids-container {
  overflow-x: auto;
  position: relative;
  height: 245px;
  padding-top: 10px;
  display: -webkit-flex;
  -webkit-justify-content: center;
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.polaroids {
  position: absolute;
  min-width: max-content;
}

<div class="container-fluid">
  <div class="container polaroids-container">
    <div class="polaroids">
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
    </div>
  </div>
</div>

这将使我的内容居中，但div中的第一个元素在左侧被切断。正如您在图像中看到的，滚动条一直位于左侧，因此您无法向左滚动以查看该内容。

这里的目标是将所有div集中在类polaroids内，而不要砍掉第一个div。

Answer 1

好吧，我做了个小提琴，然后看看你现在在做什么。将“ left：0”添加到宝丽来中。设置对齐方式后，然后使用JavaScript将滚动条设置为居中。

.polaroids {
  position: absolute;
  left:0;
  min-width: max-content;
}

<script>
  var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
  var polaroidsInner = document.getElementsByClassName("polaroids")[0];
  polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>