Pick the one that you find the more "sane":

  /* method1: flexbox hack */
  .container {
    display: flex; /* opt into the new box model */ 
    justify-content: center; /* "align" */
    align-items: center; /* "valign" */
  }

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

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

  /* center me */
  .element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

etc...