CSS垂直配向テーブル法は効果

Question

Iが垂直 display: inline-blockを使用せずにCSSを持つボックスを整列させるために必要

を有していません。要素の高さがわからないので、私はhere（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> 

ただし、このテストページの垂直方向の配置はまったく効果がありません。これらのdivの計算されたCSSによると、表示値はブロックに設定されます！どのようにこれらのdivを中央に表示させることができますか？

Answer 1

div要素から

消去float:leftdisplay:table-cellとfloat:leftは一緒に何の意味

Codepenを行うものではありませんか？ 小さな要素を含む各表のセルに別のDIVを挿入/ネストし、表要素自体に背景色を割り当てました。

Answer 2

多くの方法のうち、これを達成できる方法は、親をposition:relative;、その子をposition:absolute; top:50%; transform:translateY(-50%);に設定することです。この質問は以前何度も答えられましたが。このよう

：COMMENT AFTER http://codepen.io/anon/pen/ORrNdW

ADDITION：codepen.io/anon/pen/NRxALO -

Answer 3

私はようやく答えを見つけました。フレックスボックスのスタイリング（ディスプレイ：フレックス）を使用する必要があります。このメソッドを使用すると、高さを指定せずに要素を中央揃えることができます。それを使用する方法については、Thisページを参照してください。