css にて簡単に縦方向の中央寄せをする

IE6 が主要ブラウザだった頃は色々大変だったけど、
最近のブラウザは楽にレイアウトをいじれる。

縦方向の中央寄せをする方法は色々あるけど、
下記のサンプルコードが個人的に一番お手軽かなと思う。

section {
	height: 100vh;
	display: flex;
}
section > div {
	background: #ccc;
	margin: auto;
}

<section>
	<div>contents</div>
</section>

最近のブラウザは自身のアップデートを自動的に行うようになっているし、
postcss/autoprefixer を使えばブラウザを意識することなく書けるので web フロントがすごい楽になった。