【SCSS/CSS🔰】ボタンの中の文字を中央揃えにする方法

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。
※コードはSCSSでの記述です。

display:inline-flex;を使う

Widthのサイズが自動で決まっていない場合の方法で以下のコードを使うことで上下中央になる。

  display: inline-flex;
  justify-content: center;
  align-items: center;

inlineにすることで文字一杯
justify-contentで主軸の調整
align-itemsで交差軸の調整をしている。

そのため上下中央になる。

  display: flex;
  justify-content: center;

すると中央配置になる。

  display: flex;
  justify-content: center;
  align-items: center;
　margin: 0 auto;

gridを使う方法もある。

  display: grid;
  place-items: center;
　margin: 0 auto;