css样式—字体垂直、水平居中 的坑

   <div class="box">
        <div class="tt">啦啦啦</div>
    </div>

        .box {
            display: flex;
        }

        .tt {
            padding: 0px;
            width: 500px;
            height: 200px;
            text-align: center;
            background-color: #F69;
            display: table-cell;
            vertical-align: middle
        }

父级开启flex 这种居中效果失效

display: flex;
  flex-direction: column;
  justify-content: space-between;
  

<div class="int_det_tuxing">
                <p>Contact now</p>
              </div>
              
              
.int_det_tuxing {
  width: 1.57rem;
  height: 0.4rem;
  border: 2px solid rgba(39, 131, 242, 1);
  border-radius: 0.17rem;
}
.int_det_tuxing p {
  font-size :0.08rem;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-weight: 550;
  color: rgba(39, 131, 242, 1);
}

为什么呢？

   text-align: center;
        display: table-cell;
        vertical-align: middle;

这三行代码是加给父级的