不固定宽高垂直居中?

<div id='box'>
  这是一个宽高不确定的
</div>
<style>
#box{
 position:fiex;
top:50%;
left:50%;
background:black;
width:50%;
height:50%;
transform:translateX(-50%) translateY(-50%)
}
</style>