【CSS】vertical-align:center;が効かないときにやったこと

縦中央に配置したいけどできない

<div>の中のに入れた<img>とか<svg>を上下左右中央に配置したくて、横中央の配置はtext-align:center;やmargin-left:auto;＆margin-right:auto;でできたのですが、縦中央の配置がvertical-align:center;でできませんでした。そこで解決方法が見つかったのメモ。

参考になったページ

以下のサイトを参考に解決できました。

Link

Vertical-Alignが効かないパターンと、効くパターン | Hpcode（えいちぴーこーど）

https://haniwaman.com/vertical-align/

display:flex;で解決

結局、vertical-align:center;は使わず、上記の参考ページもあったdisplay:flex;で解決できました。

参考ソース

display:flex;とalign-items: center;とjustify-content: center;をセットで使います。これを上下左右中央に配置したい物を囲っているタグに割り当てればOKでした。

.box  {
  	display: flex;
  	align-items: center;
  	justify-content: center;
}