display: blockにした<a>タグの中のテキストを上下左右方向に中央揃えにするにはどうしたらいいですか？

Question

【code pen】
https://codepen.io/sino3325/pen/KKQBPjB

よろしければ上記のcodepenを見て頂きたいのですが、この場合に、「hogehoge」という文字を赤いボックスの中で上下左右に関して中央揃えにするにはどうしたらいいか、教えていただきたいです。

HTMLで使用するタグは<a>タグのみで記述できるのがコードが一番ごちゃつかなくて済むのでいいのですが、可能でしょうか？

HTMLを好きに書き換えていい場合ですと、私の中でのベストな解決策は、
「<a href=""><span>hogehoge</span></a>」として<a>タグをdisplay: flexにしてjustify-content: center; align-items: center;」とする方法です。
しかし、aタグだけで完結できるとシンプルなのでそうしたいです。

また「そういう実装なら、そんな書き方せずに普通はこう書くよ」というようなものがあればぜひ教えていただきたいです。

Answer 1

a {
  text-decoration: none;
  color: #333;
  
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;

  display: grid;
  place-items: center;

/*
  ↓こちらでも可。

  display: flex;
  place-content: center;
  flex-wrap: wrap;
*/

}

Answer 2

現状のcssに下記を追加でできますよ
line-heightは行の高さを決めることができます。
こいつを外枠の箱と一緒のheightにすることで、上下中央に持ってくることができます。

注意として、boxの上から下までクリックできるようになります。aタグを広げているので

text-align: center;
line-height: 100px;

Answer 3

1つのタグ（上記だとaタグ）のみでは文字を縦中央にもってくることはかなり大変です...
（上記のaタグに

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

をつけてあげれば一応質問者様の望まれている動作になるかと思うのですが、後々上記のaタグに何かを追加するとなった際にスタイルが崩れる恐れがあるため、あまりおすすめはしません...）

質問者様の提示なされている
「<a href=""><span>hogehoge</span></a>」として<a>タグをdisplay: flexにしてjustify-content: center; align-items: center;」
が私的には一番自然かと！

Comments

[raratyurara]

なんども編集してしまいすみません...