div内にテキストを縦横に配置する

Question

私はブートストラップを使用しており、ホストコンテナの高さと幅が100％のセルを作成しようとしています。

タイトルはそのスペースの30％で、値は70％です。値の上限と下限がそれぞれ20％を占め、実際の値の60％を残しています。

HTML：

<div class="container-fluid parameterContainer"> 
<div class="row paramHead"> 
    <span class="virtAlignFix"></span> 
    <div class="centerText"> 
     SPO2 (%) 
    </div> 
</div> 
<div class="row paramValWrapper"> 
    <div class="row paramLimit"> 
    <span class="virtAlignFix"></span> 
    <div class="centerText"> 
    200 
    </div> 
    </div> 
    <div class="row paramValue"> 
    <span class="virtAlignFix"></span> 
    <div class="centerText"> 
    80 
    </div> 
    </div> 
    <div class="row paramLimit"> 
    <span class="virtAlignFix"></span> 
    <div class="centerText"> 
    40 
    </div> 
    </div> 
</div> 

CSS：私の試みの

html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    height: 100%; 
    width: 100%; 
} 
.virtAlignFix { 
    line-height: 100%; 
} 

.parameterContainer { 
    height: 100%; 
    width: 100%; 
} 

.paramValWrapper { 
    height: 70%; 
    width: 100%; 
} 

.paramLimit { 
    height: 20%; 
    width: 100%; 
    text-align:center 
} 

.paramHead { 
    height: 30%; 
    width: 100%; 
    text-align:center 
} 

.paramValue { 
    height: 80%; 
    width: 100%; 
    text-align:center 
} 

.centerText { 
vertical-align:middle; 
    display:inline-block; 
} 

フィドル： http://jsfiddle.net/WCBjN/1173/

EDIT：追加の高さの％ボディとページへ。

Answer 1

テキストを中心にするのは簡単ですが、最も簡単な方法は次のとおりです。あなたもjsFiddleをチェックアウトすることができます：https://jsfiddle.net/jL9bs0j7/

.text-container { 
 
    height:200px; 
 
    width:400px; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
} 
 

 
.text-container span { 
 
    display: block; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="text-container"> 
 
    <span>Hello World</span> 
 
</div>