title: Absolutely positioned button not centering in IE11
body: <p>It's a landing page with a big background image assigned to the body. It works fine in Chrome and Firefox, but it's not centering in Internet Explorer 11.  Below is my code.  Please help, thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="landing-bg"&gt;
  ...
  &lt;a class="watch-trailer-btn" href="#"&gt;&lt;span&gt;Watch Trailer&lt;span&gt;&lt;/a&gt;
  ...
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.landing-bg{    
      width: 100%;
      height: 1350px;
      display: block;
      position: relative;
  }
  .watch-trailer-btn{
      position: absolute; 
      display: inline-block;
      width: 180px;
      height: 20px;
      color: #fff;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 490px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      text-transform: uppercase;
      padding: 20px 0;
      border-radius: 8px;
      background: #f1d948;    
  }
  </code></pre>
  
  <p><strong>UPDATE</strong> w/ example </p>
  
  <p><a href="http://jsfiddle.net/tmgoade/1ufss8ht/" rel="nofollow">JSFiddle Example</a></p>
  
  <p><strong>UPDATE</strong> w/ direct link</p>
  
  <p><a href="http://jsfiddle.net/tmgoade/1ufss8ht/" rel="nofollow">http://jsfiddle.net/tmgoade/1ufss8ht/</a></p>