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

它无法工作的原因：绝对定位元素不会忽略其父元素的填充。我添加了.inner div 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>

See the updated 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>

See on JSFiddle

带有填充的容器中的滚动容器上方的中心元素

2 个答案: