垂直方向に2つのdivを中心にする

Question

2つのdivを固定幅/高さdivに垂直に配置する際に助けが必要です。 最初の子divは最大高さを持つため、エクステントを動的に拡大/縮小できます。青と緑の区画が垂直に青の真ん中に来るように、それらをどのように中心に置くことができますか？ HERE

JSFiddle：https://jsfiddle.net/850sdmhj/

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 
.color-green { 
 
    max-height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
}

<div class="subtext-container"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
</div>

Answer 1

はそれを動作させるためにdisplay:flexプロパティを試してみてください。

更新CSS：

.subtext-container { 
    position: absolute; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
} 

.color-teal { 
    max-height: 40px; 
    overflow: hidden; 
    background-color: teal; 
} 

.color-green { 
    height: 13px; 
    font-size: 9px; 
    background-color: green; 
} 

例フィドル：Demo

注：ブラウザのサポートをご確認ください。

ブラウザのサポート：http://caniuse.com/#feat=flexbox

Answer 2

フィドルhttps://jsfiddle.net/850sdmhj/1/

更新 subtext-container

.subtext-container { 
    position: relative; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display:table-cell; 
    vertical-align:middle; 
} 

ために、以下のCSSを使用します

Answer 3

多分、等ラッパーを使用して

.colorラップ{ 位置：相対。トップ：50％; 変換：移動Y（-50％） }

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 

 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 

 
.color-green { 
 
    height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
} 
 

 
.color-wrap{ 
 
\t position:relative; top:50%; 
 
\t -webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%) 
 
}

<div class="subtext-container"> 
 
    <div class="color-wrap"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
    </div> 
 
</div>

Answer 4

私は ".vertical-ALIGN" クラスで、別のダイビングの内側.color-ティールと.color-グリーンを入れてしまうでしょう。

<div class="subtext-container"> 
    <div class="vertical-align"> 
    <div class="color-teal">teal</div> 
    <div class="color-green">green</div> 
    </div> 
</div> 

そしてCSSファイルで：固定の高さを持っています

.vertical-align{ /* This will do the trick to center content vertically */ 
    display: table-cell; 
    vertical-align: middle; 
} 

.subtext-container { 
    display: table; /* Add Display Table to the container */ 
} 

これは、コンテナ（表表示と1）がいる場合にのみ動作します。作業例で

あなたのフィドル：

https://jsfiddle.net/rx79sb6m/はまた、あなたが同じ結果を達成するために、別の5つの方法を見つけることができthis postを読むことができます。