HTMLとCSSを使用して、水平テーブル内に垂直テーブルの長方形を表示するにはどうすればよいですか？

Question

3つの矩形（黒色）があるページを作成したいと思います。コードはこれを示しています。今度は、第2の水平矩形の内側に、サイズの異なる3つの垂直矩形（赤色）を作成したいと考えています。すべてのテキストと各テキストは、各矩形の中央に配置する必要があります（縦と横）。

私は第二矩形内3列を挿入し、この内のすべてのテキストのセンタリングにはどうすればよい：

<div class="wrap"> 
    <div class="row_wrap"> 
    <div class="head x"> 
     ONE 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="middle x"> 
     TWO 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="bottom x"> 
     THREE 
    </div> 
    </div> 
</div> 

body {font-size:36px; color:green;} 
.wrap {display: table; width:100%;} 
.row_wrap{display:table-row;} 
.x{display:table-cell; vertical-align:middle; text-align:center;} 
.head{height:200px; background:#fa4;} 
.middle{height:400px; background:#4af;} 
.bottom{height:100px; background:#a4f;} 

Answer 1

を、私はこの質問が古いですけど、この問題を解決することが可能です知っているのは興味深いですflexboxを使用します。

.row, .column{ 
 
    display: flex; 
 
} 
 

 
.row{ 
 
    width: 100%; 
 
    height: 10rem; 
 
    border: 3px solid black; 
 
    flex-flow: 
 
} 
 

 
.column{ 
 
    border:3px solid red; 
 
    height: 100%; 
 
    flex: 1; 
 
} 
 

 
.column--big{ 
 
    flex: 2; 
 
} 
 

 
.center{ 
 
    justify-content: center; 
 
    align-items: center 
 
}

<div class="row center"> 
 
    <span>Center</span> 
 
</div> 
 

 
<div class="row center"> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column column--big center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
</div> 
 

 
<div class="row center"> 
 
    <span>Center</span> 
 
</div>

このコードは明らかに最適化することができ、それがスタートです。