CSS 百分比高度居中

<div class="box">
    <div class="center">
      我是居中文字
    </div>
  </div>

 .box{
    height: 80px;
    width: 200px;
    background: rgb(0, 0, 0);
    color: white;
    font-size: 11px;
  }
  .center{
    height: 100%;
    width: 100%;
    background: black;
    display:flex;
    justify-content:center;
    align-items:center;
  }