title: 'display: inline block' trick not working in firefox
body: <p>what I am trying to create is a full page website (no scrollbar) with a block of text/images/divs that centres both vertically and horizontally. I have researched and used a technique using a 100% height div with 0px width and then a content div to vertically centre content. Works perfect in safari, not at all in firefox  (horizontal works in both browsers.) block of code used for this below...</p>
  
  <p>html-</p>
  
  <pre><code>body
  
  &lt;div class="block"&gt;
    &lt;div class="centered"&gt;
      ... content and images
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css-</p>
  
  <pre><code>html, body {height: 100%;}
  
  .block {
  background: url(images/bgimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  min-height: 100%;
  margin: 0px;
  }
  
  .block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
  }
  
  .centered {
  display: inline-block;
  vertical-align: middle;
  padding:0px;
  margin: 0px;
  text-align: center;
  *display:inline;
  }
  </code></pre>
  
  <p>is there some equivalent to "display: inline-block" i can use for firefox? I can't use 'float:left' cause it won't vertically center the content div, and screws up the inline block statement.</p>
  
  <p>All help welcome</p>
  
  <ul>
  <li>Cheers</li>
  </ul>