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

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

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

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

height: 100vh; はスマホでの挙動が怪しいので、
もしくは下記。

section {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: flex;
}
section > div {
	background: #ccc;
	margin: auto;
}

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

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