ブロック要素内で、インライン要素を上下中央揃えにしたい

Question

掲題の通り、imgをheader-logoというブロック要素内で、上下左右中央揃えしたいです
。
左右はtext-align: center;で簡単にできるのですが、 上下中央は（vertical-align）でしょうか。
しかし、ブロック要素にかけてもインライン本体にかけても反映されないので、一旦消して教えをこうことにしました。

vertical-alignは使い方やルールがイマイチ理解できずに困っています。
vertical-alignを使わずとも他に簡単に上下中央できる方法があれば教えていただきたいです。

よろしくお願い致します。

<div class="header-logo">
	<a href="#">
		<img src="image.png" alt="A社のロゴ" class="header-logo-size">
	</a>
</div>
コード

.header-logo{
	background-color: #333;
	width: 200px;
	height: 70px;
	text-align: center;
}
.header-logo-size{
	width: 70%;
}
コード

Answer 1

vertical-alignを使わずとも他に簡単に上下中央できる方法があれば教えていただきたいです。

display: flex;を用いると簡単に実装できます。

.header-logo {
  /* 追加 */
  display: flex;
  align-items: center; /* 子要素を縦方向の中央配置 */
  justify-content: center;  /* 子要素を横方向の中央配置 */
}

参考URL:
https://note.com/new1ro/n/nb765293b9017

---

上下の中央揃え・中央配置は、左右に比べて難しいです。
display: flex;が使えるようになるまでは、もっと複雑で制約がある方法しかありませんでした。

vertical-alignは使い方やルールがイマイチ理解できずに困っています。

vertical-align: middle;で上下中央揃えができるのは親要素にdisplay: table-cell;が指定されているときだけです。

文章の1行1行の中での縦方向の整列方法を指定する際に「vertical-align」は使用します。
↑
いやそういうことでなくて...、と思いましたよね? でも「vertical-align」は、
上下方向に好きに配置するためにつくられたプロパティではないので、仕方がないです。

Comments

[退会済みユーザー]

大変分かりやすい回答ありがとうございます！
その手がありましたか。使ったら、うまくいきました。
>「vertical-align」は、
上下方向に好きに配置するためにつくられたプロパティではない
というのも初めてしりました。

CSSまだまだ奥が深そうですね。。
ありがとうございました！！

Answer 2

ここが参考になるのではないかと思います．
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox6