Pick the one that you find the more &quot;sane&quot;:<p><pre><code>  &#x2F;* method1: flexbox hack *&#x2F;
  .container {
    display: flex; &#x2F;* opt into the new box model *&#x2F; 
    justify-content: center; &#x2F;* &quot;align&quot; *&#x2F;
    align-items: center; &#x2F;* &quot;valign&quot; *&#x2F;
  }

  &#x2F;* method2: table hack *&#x2F;
  .container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  &#x2F;* method3: translate hack *&#x2F;
  &#x2F;* hack to fix bad rendering *&#x2F;
  .container {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  &#x2F;* center me *&#x2F;
  .element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</code></pre>
etc...