Centering text vertically and horizontally in a div
<p>I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.</p>

<p>The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.</p>

<p>HTML:</p>

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

<p></p>

<p>CSS:</p>

<pre><code>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;  
}
</code></pre>

<p>Fiddle of my attempt:
<a href="http://jsfiddle.net/WCBjN/1173/" rel="nofollow">http://jsfiddle.net/WCBjN/1173/</a></p>

<p>EDIT: added height % to body and page.</p>