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页面描述了如何使用它。