CSS vertikale Ausrichtung Tabelle Methode hat keine Auswirkungen

Question

Ich muss vertikal eine Box mit CSS ohne Verwendung von display: inline-block. Da ich die Höhe meiner Elemente nicht kenne, habe ich den Weg here beschrieben (CSS Table Method).

<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> 

Die vertikale Ausrichtung auf dieser Testseite hat jedoch keinerlei Auswirkungen. Gemäß dem berechneten CSS dieser Divs wird der Anzeigewert auf Blockieren gesetzt! Wie kann ich diese divs in der Mitte erscheinen lassen?

Answer 1

Lösch die float:left von den DIVs - display:table-cell und float:left macht zusammen keinen Sinn

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

ADDITION NACH KOMMENTAR:

So: codepen.io/anon/pen/NRxALO? Ich habe in jeder Tabellenzelle, die die kleineren Elemente enthält, ein weiteres DIV eingefügt/verschachtelt und dem Tabellenelement selbst die Hintergrundfarbe zugewiesen.

Answer 2

Ein Weg, aus vielen Möglichkeiten, können Sie erreichen, indem Sie den Elternteil auf position:relative; und sein Kind auf position:absolute; top:50%; transform:translateY(-50%); setzen. Obwohl diese Frage schon viele Male zuvor beantwortet wurde.

Answer 3

Ok, endlich habe ich die Antwort gefunden. Sie müssen das Flexbox-Styling verwenden (Anzeige: flex). Mit dieser Methode können Sie Elemente zentrieren, ohne eine Höhe anzugeben. This Seite beschreibt, wie man es benutzt.