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>