文字の中央揃え？

お久しぶりです、私です。
最近新規に知識の増える仕事がありませんで、更新進みませんデシタ。
が・・・

久々に、HTMLをいじることになりまして。
まあメモがてら。

<style>
	.container{
		text-align:center;
		background-color:#a50000;
	}
</style>
<div style="height:10vw;line-height:10vw;" class="container">
	<font color="white" style="font-size:8vw;">やふう</font>
</div>

コイツが一体何をしているかというと、
ウィンドウの横幅に合わせて文字の大きさが変わるのです。
“vw”とか言う単位で。

しかしこれをすると、文字の高さをブロックが取得しないため、ブロック自体の高さにも同単位を指定。
更に文字の中央がサイズ取得されてないのが影響してずれるので、
”line-height:10vw”
と言った形で中央にあわせて終了。

これで背景と文字が同時に横のサイズに合わせて変更されるぞやったぜ！
※ただし一行に限る！

参考
http://www-creators.com/archives/391
https://teratail.com/questions/49808

※おまけ

WordPressのカスタマイズで追加CSSを書き、投稿追加ページの設定にあるブロックの中から、高度な設定→追加CSSの欄に行き、ここにclass=””とかの、””の中身のみ記載すると、反映される。