【CSS】要素の左右真ん中揃え

CSS

2017年11月16日2021年05月13日

忘れがちな要素の左右真ん中揃え、
備忘録がてらシチュエーション別にまとめてみました。

インライン要素の左右真ん中揃え
ブロック要素の左右真ん中揃え
擬似要素にpositionを使った時の、左右真ん中揃え
flexboxの左右真ん中揃え
まとめ

インライン要素の左右真ん中揃え

HTML


<p class="inline">インライン要素の左右真ん中揃え</p>

<p class="inline">インライン要素の左右真ん中揃え</p>

CSS


.inline{
	text-align: center;
}

.inline{

text-align: center;

}

プレビュー

インライン要素の左右真ん中揃え

ブロック要素の左右真ん中揃え

HTML


<div class="block">
	ブロック要素の左右真ん中揃え
</div>

ブロック要素の左右真ん中揃え

</div>

CSS


.block{
	width: 50%;/* 幅を指定する */
	margin: 0 auto;
}

.block{

width: 50%;/* 幅を指定する */

margin: 0 auto;

}

プレビュー

ブロック要素の左右真ん中揃え

擬似要素にpositionを使った時の、左右真ん中揃え

HTML


<div class="position">
	これ親要素
</div>

これ親要素

</div>

CSS


	.position{
		background: #ff0;
		position: relative;
		width: 100%;
	}
	.position:after{
		content: "これ擬似要素！";
		position: absolute;
		width: 30%;
		display: block;
		text-align: center;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

.position{

background: #ff0;

position: relative;

width: 100%;

}

.position:after{

content: "これ擬似要素！";

position: absolute;

width: 30%;

display: block;

text-align: center;

left: 0;

right: 0;

margin: 0 auto;

}

プレビュー

これ親要素

ポイントは、擬似要素はインライン要素なので、display: block;と幅を指定することです。

flexboxの左右真ん中揃え

HTML


<div class="flex">
	<p class="flex_inner">flexboxの</p>
	<p class="flex_inner">左右真ん中揃え</p>
</div>

<p class="flex_inner">flexboxの</p>

<p class="flex_inner">左右真ん中揃え</p>

</div>

CSS


.flex{
    display: flex;
    justify-content: center;
}
.flex_inner{
    background: #ff0;
    width: 30%;
    margin: 5px;
}

.flex{

display: flex;

justify-content: center;

}

.flex_inner{

background: #ff0;

width: 30%;

margin: 5px;

}

プレビュー

flexboxの

左右真ん中揃え

わかりやすいようにmargin入れてます。
flexboxは、これまで面倒だったレイアウトも簡単に再現できて便利です！

まとめ

自分は特に擬似要素×positionの場合を忘れがちなので、これで確認します！
CSSって楽しいーー！！