縦中央に配置したいけどできない
<div>の中のに入れた<img>とか<svg>を上下左右中央に配置したくて、横はtext-align:center;やmargin-left:auto;＆margin-right:auto;でできたのですが、縦中央がvertical-align:center;できませんでした。そこで解決方法が見つかったのメモ。
参考になったページ
以下のサイトを参考に解決できました。
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;
}