title: div not centered in IE but works fine in chrome and firefox
body: <p>I know this issue has been discussed a lot and i have read over the other questions and answers but i have not been able to solve this issue. I am using bootstrap and i want to center a div which works in chrome and firefox however in explorer the content is on the right side of the screen. I am unsure of what approach to take in order to correct the position. The css for my page is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    font-family: "Verdana", Geneva, sans-serif;
  }
  .sRed {
    color: black;
  }
  u {
    color: red;
  }
  .container {
    position: relative;
    height: 14rem;
  }
  .jumbotron {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background-color: white;
  }
  .fa-exclamation-triangle {
    color: red;
    padding-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="jumbotron vertical-center"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;&lt;center&gt;&lt;i class="fa fa-exclamation-triangle fa-lg"&gt;&lt;/i&gt;&lt;u&gt;&lt;span class="sRed"&gt;Title&lt;/span&gt;&lt;/u&gt;&lt;/center&gt;&lt;/h1&gt;
        &lt;center&gt;
          &lt;h3&gt;Main Content.&lt;/h3&gt;
  
        &lt;/center&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have included a fiddle <a href="http://jsfiddle.net/tvc4tv9L/" rel="nofollow">Here</a>. Thank you for any help and suggestions</p>