上下左右中央に揃えるCSS

上下左右中央に揃えるCSS

テキストの量が1行でも3行でもピタッと天地左右中央に揃えます。
よく使うのによく忘れちゃうので、自分用に投稿。

主流はFlexbox式

最近では、IEも最新版のみ対応の要件が増えてきたこともあり、クライアントワークでもFlexboxが使いやすくなってきました。

<style>
.parent{
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
 
<div class="parent">
	<p class="child">上下左右の中央に配置</p>
</div>

まだ現役 transform式

まだ使う場面があるtransform式は、子要素の左上を上下左右の中央に配置し、transformで子要素の縦横50%分づつを左上に戻す事で実現。

<style>
.parent {
	position: relative;
	overflow: hidden;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
 
<div class="parent">
	<p class="child">上下左右の中央に配置</p>
</div>
// 左右のみ中央の場合
transform: translateX(-50%);

// 上下のみ中央の場合
transform: translateY(-50%);