滾動容器中具有動態高度的垂直居中元素

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>