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

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

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

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

HTML


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

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

CSS


.inline{
	text-align: center;
}

.inline{

text-align:center;

}

プレビュー

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

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

HTML


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

<divclass="block">

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

</div>

CSS


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

.block{

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

margin:0auto;

}

プレビュー

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

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

HTML


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

<divclass="position">

これ親要素

</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:0auto;

}

プレビュー

これ親要素

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

flexboxの左右真ん中揃え

HTML


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

<divclass="flex">

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

<pclass="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って楽しいーー！！