title: Safari: vertically center div inside a fixed div
body: <p>I'm currently having an issue that is only appearing in safari (have not tested in IE yet though). I am creating a lightbox of sorts, where there is a full sized fixed container, and a fluid inner div. The issue is that in safari, the inner container is at the top of the page instead of vertically centered. I'm having another issue in safari at the moment, so maybe I'm just having a problem with safari locally, but I'd rather look to the community first. Currently it looks like this:</p>
  
  <pre><code>&lt;div class="order-container"&gt;
      &lt;div class="order-inner"&gt;
          &lt;h2&gt;Text&lt;/h2&gt;
          &lt;input type="text" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
       .order-container {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 999;
          background: #d7d7d7;
      }
      .order-inner {
          position: relative;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          text-align: center;
      }
  </code></pre>