前提
これは自分用のメモに近しいものです。一瞬戸惑ったので次すぐできるように。
現象
単純な話です。
<divclass="wrapper"><divclass="btn">BUTTON</div></div>.wrapper{display:flex;flex-direction:column;}.btn{width:7rem;height:2.6rem;border:solid0.2rem#bd4a4f;display:table-cell;vertical-align:middle;text-align:center;margin:auto1rem;}.btnの中身のテキストを中央揃えにするためにdisplay:table-cellを適用したいんですが、親要素がflexだと子要素のtable-cellが解除されるのか、うまく縦方向の中央揃えができなくなります。
対処法
ボタン自体に最低限のラッパーをつけて保護してあげるだけ。
<divclass="wrapper"><divclass="btn-wrapper"><divclass="btn">BUTTON</div></div></div>.btn-wrapper{width:7rem;height:2.6rem;/*必要ないけど、btnにmargin autoを適用していた場合はこっちに移す。それに応じて高さと幅も必要になる。*/margin:auto1rem;}