滚动容器中具有动态高度的垂直居中元素

Question

我有一个滚动容器，它通常是整个屏幕的大小。 在其中放置动态内容。 所以我不知道它具有哪个高度或将插入多少个元素。

现在我要这样布局：

• 如果有足够的空间，我希望整个内容在滚动容器内垂直居中
• 如果内容的总高度超过了滚动容器的高度，我希望容器仅滚动内容就好像没有居中。

我创建了一个示例，尝试使用flexbox解决此问题。 当内容物高度小于容器高度时，它会按预期工作。 但是当内容超出容器高度时，由于justify-content ， justify-content某些元素将被切除：

您可以在图像上看到滚动容器的scrollTop一直位于顶部，但是元素1和2不可见。

我想知道是否只有CSS解决方案。 我可以自己做一个JS解决方案，但这不是我要的。 如果不可能，那也没关系。

 .container { display: inline-block; width: 300px; height: 300px; border: 2px solid red; overflow-y: auto; margin: 1rem 0; display: flex; flex-direction: column; justify-content: center; } .block { width: 80%; height: 3rem; margin: 1rem auto; background: blue; flex-shrink: 0; color: #fff; text-align: center; } 

 <div class="container"> <div class="block">1</div> </div> <div class="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> </div> <div class="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> </div> 

Answer 1

尝试将溢出应用于内部包含div，如下所示：

 .container { display: inline-block; width: 300px; height: 300px; border: 2px solid red; margin: 1rem 0; display: flex; flex-direction: column; justify-content: center; } .inner { overflow-y: auto; } .block { width: 80%; height: 3rem; margin: 1rem auto; background: blue; flex-shrink: 0; color: #fff; text-align: center; } 

 <div class="container"> <div class="inner"> <div class="block">1</div> </div> </div> <div class="container"> <div class="inner"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> </div> </div> <div class="container"> <div class="inner"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> </div> </div>