title: CSS, vertical alignment doesn't correctly work in Mozilla Firefox
body: <p>I am trying to create a page that has fixed height Header and also footer (=Nav), where there in between of them is a contentWrapper div, that fully stretches to fill the maximum height of the screen. In the contentWrapper, there is a content div, that includes a form. I need this content div to be <strong>both vertically and horizontally aligned according to its parent div contentWrapper</strong>. I found a solution for this, which works pretty well, but only in Chrome and IE, <em>not in Firefox (version 22.0)</em>.</p>
  
  <p>I created this fiddle where you can observe this behaviour, try different browsers.
  <a href="http://jsfiddle.net/qWYqb/" rel="nofollow">http://jsfiddle.net/qWYqb/</a></p>
  
  <p>Any ideas how to fix this for Mozilla Firefox?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="pageWrapper"&gt;
              &lt;header&gt;
                  &lt;div id="logo"&gt;
                      Logo
                  &lt;/div&gt;        
              &lt;/header&gt;
              &lt;div id="contentWrapper"&gt;
                  &lt;div class="valignMiddle"&gt;
                      &lt;div id="content"&gt;
                          &lt;form&gt;
                              &lt;table&gt;
                                  &lt;tbody&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;&lt;label for="fullName"&gt;Full Name&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;input id="fullName" type="text" name="fullName" required="required" /&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;&lt;label for="email"&gt;E-mail&lt;/label&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;input id="email" type="email" name="email" required="required" /&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                              &lt;div&gt;
                                  &lt;input type="submit" id="submit-go" value="Start Now"/&gt;  
                              &lt;/div&gt;                
                          &lt;/form&gt;  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;nav&gt;    
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" class="btn1"&gt;Option1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="btn2"&gt;Option2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
      outline:none;
  }
  html, body{
      min-height: 100%;
          margin: 0;
      padding: 0;
  }
  
  table
  {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  td, th {
      vertical-align:top;
  }
  
  body{
      background-color: #E3E3E3;
  }
  /* This padding is there to stop margin collapsing */
  div {
      padding: 1px 0;
  }
  
  #pageWrapper{
      position:absolute; top:0; bottom:0; left:0; right:0;
      padding: 126px 0 100px 0;
      margin: 0 auto;
      width: 400px;
      overflow: hidden
  }
  
  /* --- HEADER --- */
  header{ 
      width: 100%;
      height: 126px;
      margin-top:-126px;
      background: yellow;
  }
  
  /* --- MAIN CONTENT --- */
  #contentWrapper{
      width: 100%;
      position: static; 
      display: table; 
      overflow: hidden; 
      min-height: 100%;
      background: red;
  }
  
  .valignMiddle { 
      position: static; 
      display: table-cell; 
      vertical-align: middle; 
      width: 100%; 
  }
  
  #content{
      width: 293px;
      margin: 0 auto;
      background: green;
  }
  
  /* --- NAVIGATION --- */
  nav {
      width: 100%;
      height: 100px;
      margin-bottom:-100px;
      background: pink;
  }
  
  nav li {
      display: inline-block;
      list-style: none outside none;
  }
  
  nav ul {
      text-align: center;
  }
  </code></pre>