text-alignを使う

要素というかテキストを中央に配置したい場合、やはり簡単なのがtext-align: center;を指定する方法です。

text-alignプロパティは親要素から子孫要素に継承されるので、テキスト要素を含む親要素に指定しても、テキスト要素に指定しても、どちらでもOKです。

例えば、下の二つのコードの見た目上の表示結果は同じになります。

	<p class="center_text">テキストを中央配置</p>

		.center_text {
			text-align: center;
		} 	

	<div class="center_text_parent">
		<p>テキストを中央配置</p>
	</div>

		.center_text_parent {
			text-align: center;
		}

＊表示結果＊

テキストを中央配置

ただ、text-align: center;では、中央配置だけでなく中央揃えにもなってしまう点に注意が必要です。

よって、下記のようにtext-align: center;を指定しているテキスト要素に改行タグ（br）を挟むと…

	<p style="text-align: center;">中央配置かつ<br>中央揃えになります。</p>

＊表示結果＊

中央配置かつ
中央揃えになります。

上記のような表示（中央配置・文章中央揃え）なります。
ですが、文章は左揃えのまま、全体として中央に配置したいという場合もありますよね。

その場合は違う方法を用いる必要があるので、次の章でその方法を解説します。

ちなみにですが、画像要素<img>の親要素にtext-align: center;を指定することで画像を中央配置にできたりもします。
しかし、画像に隣接するテキストが意図せず中央揃えになってしまう原因にもなるので、あまりおすすめはしません。

POINT!
1. ・テキストを中央配置にしたい場合、楽な方法はtext-align: center;を適用する方法！
2. ・text-alignプロパティは親→子孫要素に継承されるので、親要素に指定してもテキスト要素に指定してもOK！
3. ・ただし、text-align: center;では、文章が中央揃えになってしまう点に注意が必要！

width+marginを使う

文章を左揃えのまま全体を中央に配置するには、widthで幅を定義した上でおなじみのmargin: auto;を指定すればOKです。

文章の長さにちょうど良い幅を指定したい場合は、width: fit-content;とすると良いでしょう。

	<p class="left_text_centerplace">文章は左揃えにしたまま、<br>中央配置にできます。</p>

		.left_text_centerplace {
			width: fit-content;
			margin: 0 auto;
		}

＊表示結果＊

なお、テキスト要素の親要素(divなど)に指定しても良いですが、その場合は親要素の幅がテキスト要素に合わせて決定されます。
そのため、親要素に影響を与えたくない場合はテキスト要素に直接指定した方が良いと言えます。

また、widthを定義した上でmargin: auto;を指定する方法は、テキスト要素以外でも有効です。
下のコードは、背景色とwidth・heightを指定したdivタグにmargin: auto;を指定して中央配置にした例です。

	<div class="color_box"></div>

		.color_box {
			width: 6vw;
			height: 6vw;
			background-color: darkblue;
			margin: auto;
		}

＊表示結果＊

ただしwidth: 100%;など、親要素に対して横幅いっぱいになるように指定した場合は、当然ですが中央に配置されようがありません。
そのため、少なくとも親要素より小さくなるように幅を指定する必要があると言えるでしょう。

また、widthを明確に定めたくない場合も当然この方法で中央配置にすることはできません。
次の章ではwidthを明確に定めず、規定値であるautoのまま中央に配置する方法をご紹介します。

POINT!
1. ・widthで横幅を定義し、marginをautoにすることで、文章を左揃えのまま全体を中央配置にできる！
2. ・テキストは文字数によって横幅が可変するため、width: fit-content;と指定するのがおすすめ！
3. ・width/marginを使った方法はテキスト要素だけでなく、他の要素の中央配置にも使える！

grid/flex+justify-contentを使う方法

WordPressなどのCMSでは、要素のwidthが自動的に決められて変更の自由が効きづらい場合があります。（テーマにもよりますが）
widthの自由が効かないということは、前章で紹介したwidth/marginで中央配置にする方法が使えないということです。

そんな時に役に立つのが、中央配置にしたい親要素に、display: grid; justify-content: center;を指定する方法です。

flex（フレックスボックス）にしても良いのですが、flexだけでは要素が横並びになってしまうので、意図しない表示結果になる場合があります。
当然、子要素が１つの場合は問題になりません。

下のサンプルコードはdivタグの子要素としてp（段落）タグを2つ入れ、親要素にgrid+justify-contentを指定して中央配置にしたものです。

	<div class="justify_center">
		<p>段落（１）</p>
		<p>段落（２）</p>
	</div>


		.justify_center {
			display: grid;
			justify-content: center;
		}

＊表示結果＊

この方法の良い点はwidthを指定しなくて良いという他にも色々あり、たとえばorderプロパティで子要素の入れ替えができるという点などがあります。

何らかの理由でHTMLを直接書き換えることが難しい条件下で、子要素の順番を入れ替えたいという場合、子要素にorderプロパティを指定すれば中央配置にしつつ順番を操作することができます。
下のサンプルコードはその一例です。

	<div class="justify_center2">
		<p>段落（１）</p>
		<p>段落（２）</p>
	</div>

		.justify_center2 p:nth-child(1) {
			order: 2;
		}
		.justify_center2 p:nth-child(2) {
			order: 1;
		}

＊表示結果＊

中央配置とは直接関係ないテクニックですが、orderプロパティが使用可能なgrid/flexを使う大きなメリットの１つなので、セットで覚えておきたいテクニックです。

POINT!
1. ・中央配置にしたい要素の親要素に、grid/flex + justify-content: center;を指定することで中央配置にできる！
2. ・flex（フレックスボックス）を使う場合は、子要素が横並びになって意図しない表示にならないように注意！
3. ・grid/flexにすることでorderプロパティも使用可能！HTMLを書き換えずに要素の並べ替えもできる！

max-inline-sizeとmargin-inline

最後に紹介する方法が2022年６月現在、わりと新しい中央配置の調整方法です。
これまで（おそらく）馴染みがあまりなかった、max-inline-sizeと、margin-inlineプロパティを使います。

margin-inline-sizeプロパティは、max-widthと同じような使い方・イメージです。
そしてmargin-inlineプロパティは、marginと同じような使い方・イメージです

「じゃあmax-widthとmarginを使えばいいじゃん！」と思うかもしれません。実際、ほとんど同じ表示結果になります（いずれも中央配置できます）。

ですがWordPressをはじめとしたCMSを利用している場合、max-widthは既に使われてしまっている可能性も高いです。
最悪の場合、!important指定されていて効果を上書きするのが困難な場合もあり得るでしょう。

ですが、max-inline-sizeとmax-widthに優劣関係はなく、後に指定した方が優先されるため、max-widthが既に指定されていて、しかも!important指定されていたとしても、どうにか上書きできるというメリットがあります。

下のサンプルコードはテキストを中央配置にした例です。
text-alignを使った方法と違い、左揃えのまま中央配置になります。

	<p class="inline_center_text">このテキストは中央に配置されます。</p>

		.inline_center_text {
			max-inline-size: max-content;
			margin-inline: auto;
		}

＊表示結果＊

このテキストは中央配置になります。

▼参考までに、max-widthとmarginを使って中央配置にしたものも置いておきます。

	<p class="inline_center_text">このテキストは中央に配置されます。</p>

		.inline_center_text {
			max-width: max-content;
			margin: auto;
		}

＊表示結果＊

このテキストは中央配置になります。

ということで色々な中央配置の方法をご紹介してきましたが、どの方法が正解というわけではなく、破綻しにくい・他の要素に影響を与えにくい方法ならOKだと思います。

そういう意味では、子要素が追加されると横並びになってしまう、flex+justify-contentはおすすめできるシチュエーションが少ないかもしれません。

要素を増やしたり減らしたり、CSSを追加したりしても問題が起こらない・起きにくい方法を都度考えながら調整すると良いと思います。

POINT!
1. ・max-inline-sizeとmargin-inlineを使っても中央配置にできる！
2. ・max-widthとmax-inline-sizeに優劣関係はなく、後から指定したものが適用されるのでうまく使い分けよう！
3. ・色々な中央配置の方法があるが、どの方法が正しいというものではなく、状況に応じて破綻しにくい方法を選択するのが良い！