どのブラウザでも要素を上下左右中央にする方法

<main>
  <div class="redbox">
    このdivタグを中央揃えしたい。
  </div>
</main>

<style>
  .redbox {
    border-radius: 4px;
    border: 1px solid #E63E3E;
    width: 300px;
    height: 200px;
  }
</style>

html, body, main {
    height: 100%;           
}
main {
    display: flex;          
    justify-content: center;
    align-items: center;    
}

※この場合mainはクラス名じゃないので間違えないように！
変えてもいいけど…

参考サイト
たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版