Css中未知 div 宽高度，水平垂直居中方法

<div id='box' style="width: 400px; height: 400px">

　　<div id='center'>

　　　　未知宽高的div

　　</div>

</div>

const box = document.querySelector("#box");

const center = document.querySelector("#center");

水平垂直居中方法一： 

　　#box{ position: relative; }

　　#center{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

水平垂直居中方法二：

　　#box{ position: relative }

　　#center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)  }

水平垂直居中方法三：

　　#box{ display: flex;  justity-content: center; align-items: center }