前提

これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。

現象

単純な話です。

<div class="wrapper">
  <div class="btn">BUTTON</div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
}


.btn {
  width: 7rem;
  height: 2.6rem;
  border: solid 0.2rem #bd4a4f;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: auto 1rem;
}

.btnの中身のテキストを中央揃えにするためにdisplay:table-cellを適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。

対処法

ボタン自体に最低限のラッパーをつけて保護してあげるだけ。

<div class="wrapper">
  <div class="btn-wrapper">
    <div class="btn">BUTTON</div>
  </div>
</div>

.btn-wrapper {
  width: 7rem;
  height: 2.6rem; /*必要ないけど、btnにmargin autoを適用していた場合はこっちに移す。それに応じて高さと幅も必要になる。*/
  margin: auto 1rem; 
}