中央揃えや下揃えでいろいろと苦労してきたけど、flex 時代になり、なおかつBootstrap4 を使用しているなら、d-flex でいとも簡単にできてしまう。

上下左右中央でこんなcssを書いたりしていましたが

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Bootstrap4 なら

class="d-flex align-items-center justify-content-center"

とするだけ。

簡単だわぁ♫

bootstrap4を使用していない場合だと、以下の通りです。

{
	/* d-flex */
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	/* justify-content-center */
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	/* align-items-center */
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
}