滚动容器中位于填充容器上方的中心元素

Question

我有这个HTML：

<div class="A">
  <div class="B1">
    <div class="C1"></div>
  </div>
  <div class="B2"></div>
</div>

.A是一个带有填充的容器，B1包含一个长列表并滚动。 .B2应该在列表中对齐（垂直和水平居中，就像加载图像一样）。

我该如何实现？ 水平对齐对我不起作用： https : //jsfiddle.net/1phyb6y8/

Answer 1

它不起作用的原因：绝对定位的元素不会忽略其父元素的填充。 我已经添加了一个div .inner ，它的position: relative ，并将.B2 （正在加载动画）和.B1 （带有滚动条的容器）都放入其中。 这样， .B2的位置是基于没有填充的.inner宽度来计算的。

<div class="A">
  <div class="inner"> /* .inner { position: relative; } */
    <div class="B2">
    </div>
    <div class="B1">
      <div class="C1">
      </div>
    </div>
  </div>
</div>

请参阅更新的JSFiddle。

Answer 2

我在您的结构中添加了一个容器，因此.B1和.B2 div位于其中。 B1容器处于relative位置。 B2，就像您所做的那样，将absolute位置和正确的定位置于中心（我添加了transform: translate(-50%, -50%)因此无论块宽度如何变化，中心的div都保持在中心）。 因此，B2将始终位于B1上方的中心，并独立于其移动。 希望对您有所帮助！

<div class="A">
    <div class="B1-container">
        <div class="B2"></div>
        <div class="B1">
            <div class="C1"></div>
        </div>
    </div>
</div> 

在JSFiddle上查看