html - horizontally - Centrar texto verticalmente y horizontalmente en un div

centrar texto vertical y horizontal css

Question

Estoy usando bootstrap y estoy intentando hacer una celda que sea 100% de alto y ancho de su contenedor de host.

El título es 30% de ese espacio y el valor es 70%. Hay límites superiores e inferiores del valor que ocupan un 20% cada uno, dejando un 60% del espacio para el valor real.

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

Violín de mi intento: http://jsfiddle.net/WCBjN/1173/

EDITAR: altura agregada% a cuerpo y página.

Answer 1

Hacer central el texto es bastante trivial, el enfoque más fácil es el siguiente. También puede ver el 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>