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

Question

我有一個滾動容器，通常是整個屏幕的大小。在裏面我放置動態內容。所以我不知道它具有哪個高度或者將插入多少個元素。

現在我想佈局像這樣：

• ，如果有足夠的空間，我想整個內容垂直居中滾動容器
• 內如果內容的總高度超過的高度滾動容器，我希望容器只需滾動內容就好像沒有居中。

我創建了一個例子，我嘗試用flexbox解決這個問題。內容高度小於容器高度時，它的工作方式與預期相同。但是，當其含量超過容器高度，由於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>