中心元素以上容器填充

滾動容器我有這個HTML：中心元素以上容器填充

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

。一個是填充的容器，B1包含一個長長的清單和滾動。 .B2應該在列表中對齊（像加載圖像一樣垂直和水平居中）。

我該如何做到這一點？水平對齊不適用於我： https://jsfiddle.net/1phyb6y8/

來源

2016-03-25 kaljak

它不工作的原因：絕對定位的元素不會忽略其父項的填充。我在position: relative中添加了一個div .inner，並在其中添加了.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.

來源

2016-03-25 12:00:19 Marvin

滾動時，綠點應該不會消失:) – kaljak

我已經更新了答案，但有人刪除了我的意見，所以我不知道，如果你看到了我的更新。如果它解決了你的問題，我會很感激你接受我的答案。 – Marvin

我添加了一個容器，你的結構，因此.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

來源

2016-03-25 12:24:34 Lou

中心元素以上容器填充

回答

相關問題