CSS垂直對齊表方法不起作用

Question

我需要垂直對齊CSS的盒子而不使用display: inline-block。由於我不知道我的元素的高度，我使用了描述的方式（CSS表格方法）here。

<div style="background-color: black"> 
    <div style="background-color: aqua; display: table; margin: auto;"> 
     <div style="background-color: aliceblue; width: 200px; float: left; display: table-cell; vertical-align: middle;"> 
      <p>A</p> 
      <p>A</p> 
      <p>A</p> 
     </div> 
     <div style="background-color: green; height: 20px; width: 100px; float: left; display: table-cell; vertical-align: middle;"></div> 
     <div style="background-color: aliceblue; width: 250px; float: left; display: table-cell; vertical-align: middle;"> 
      <p>B</p> 
      <p>B</p> 
      <p>B</p> 
      <p>B</p> 
     </div> 
    </div> 
</div> 

但是，此測試頁上的垂直對齊完全沒有效果。根據這些div的計算CSS，顯示值被設置爲阻止！我怎樣才能讓這些div出現在中間？

Answer 1

擦除float:left從的DIV - display:table-cell和float:left在一起是沒有意義的

Codepen：http://codepen.io/anon/pen/ORrNdW

加成後評論：

像這樣：codepen.io/anon/pen/NRxALO？ 我在包含較小元素的每個表格單元格中插入/嵌套另一個DIV，並將背景顏色分配給表格元素本身。

Answer 2

從多種方式中，您可以通過將父項設置爲position:relative;及其子項爲position:absolute; top:50%; transform:translateY(-50%);來實現此目的。雖然這個問題以前已經回答了很多次。

Answer 3

好吧，我終於找到答案。您必須使用flexbox樣式（display：flex）。使用此方法，您可以在不指定高度的情況下將元素居中。 This頁面描述瞭如何使用它。