Zentrieren von Text vertikal und horizontal in einem Div

Question

Ich verwende Bootstrap und ich versuche, eine Zelle, die 100% Höhe und Breite des Host-Container ist.

Der Titel ist 30% dieses Raumes und der Wert ist 70%. Es gibt obere und untere Grenzen des Wertes, die 20% einnehmen, wobei jeweils 60% des Raums für den tatsächlichen Wert übrig bleiben.

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

Fiddle meines Versuch: http://jsfiddle.net/WCBjN/1173/

EDIT: zusätzliche Höhe% auf Körper und Seite.

Answer 1

Die Erstellung von Text ist ziemlich trivial, der einfachste Ansatz ist wie folgt. Sie können auch die jsFiddle check out: 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>