はじめに

このサイトでは以前「テキストやボタンを右寄せにする方法（5パターン）」を紹介しているのですが、このページへのアクセスが多い事が気になっていました。

「右寄せの方法を調べているのなら、中央寄せの方法も調べているんじゃないか？」と思い、中央寄せの方法を紹介したページを作る事にしました。

実際にはやり方は右寄せの場合とほとんど同じですが、ダイレクトに知りたい情報に辿り着いた方が親切ではないかと思った次第です。

そのため内容はほぼ「テキストやボタンを右寄せにする方法（5パターン）」の焼き直しですのでご了承ください。

テキストやボタンを中央寄せにする方法は私が知る限りで5パターンあります。

仕上がりイメージ

目次

親要素に text-arign:center を設定する

まずは親要素divにtext-arign:centerを設定して要素を中央寄せする方法です。

恐らく一番シンプルな方法だと思いますし、初めてテキストを中央寄せしたい時に行った設定ではないでしょうか。

HTML

<div class="p-test01">
	<p>テキスト</p>
	<a class="btn">ボタン</a>
</div>

CSS

ボタン部分のCSSは省略しています

.p-test01 {
	text-align: center;
}

できあがったもの

注意点としては、親要素にtext-arign:centerを設定する必要があるので、目的の要素そのものにtext-arign:centerを設定しても中央寄せにはなりません（私はいまだにたまに間違えます）。

また、親要素への設定をするので、その子要素は全て中央寄せになってしまうという点は注意が必要です。

親要素に justify-content: center を設定する

現在、私が最も好んで使っている方法です。

親要素をFlexBoxにして横方向にjustify-content: centerを設定する事で中央寄せにする方法です。

HTML

<div class="p-test02_01">
	<p>テキスト</p>
</div>

CSS

.p-test02_01 {
	display: flex;
	align-items: flex-start; /*ここは任意の値でOK*/
	justify-content: flex-end;
}

できあがったもの

注意点としては、縦に2つ並べたい時に上記のCSSを使うと正しく設定できず横並びになってしまいます（そのためテキストのみ記述しています）。

FlexBoxを使って要素を縦並びにしたい場合はflex-direction: columnを使う必要があります。

flex-direction: columnを使う時は、align-itemsとjustify-contentの扱いが逆になります。

CSS

p-test02_02 {
	display: flex;
	flex-direction: column; /*この行を追加*/
	align-items: center;  /*ここの値を修正する*/
	justify-content: flex-start; /*ここは任意の値でOK*/
}

できあがったもの

こちらも親要素に中央寄せの設定をしているため、子要素全てが中央寄せの対象になってしまう点は要注意です。

block要素にして margin: auto を設定する

上記2つは親要素に対して設定をしましたが、次の2つは対象の要素そのものに中央寄せにする設定をします（こちらはテキストを中央寄せにする場合です。）。

具体的には対象の要素をblock要素にして、text-align: centerにすることで中央寄せにします。

HTML

<p class="p-test03_01">ボタン</p>

CSS

仕組みが分かりやすいように、テキストに背景色を設定しています。

.p-test03_01 {
	display: block;
	text-align: center;
	background: #eee;
}

できあがったもの

ボタンを中央寄せにしたい場合は、次のように設定します。

block要素にして margin:auto を設定する

ボタンを中央寄せにしたい場合は、対象の要素をblock要素にして、margin:autoにすることで中央寄せにします。

HTML

<a href="" class="p-test04">ボタン</a>

CSS

.p-test04 {
	display: block;
	width: 80px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	margin: auto;
	background: #338DC9;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

できあがったもの

margin-left:autoとmargin-right:autoを併記しても中央配置ができます。

block要素にしているため、要素にwidthを設定する必要があります。そのため、テキストの場合だと同じ方法では中央寄せにできません。

position: absolute を設定する

たぶん実用性が一番薄い方法になります。position: absolute;で要素の配置を絶対値指定にして、left: 50%;で中央に配置してしまおうという物です。

HTML

<a href="" class="p-test05">ボタン</a>

CSS

.p-test05 {
	position: absolute;
	left: 50%;
	top: 0;
}

できあがったもの

結果を見て気が付くと思いますが、設定した要素が少し右に寄っています。

これは、親要素の左端から50%右へ移動した座標が目的の要素の始点になるからです。

そのため、目的の要素分の50%分を左に寄せる必要があり、それにはtransform: translateX(-50%)を追記します。

CSS

.p-test05_02 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%); /*ここを追記*/
}

right:50%transform: translateX(50%)と設定しても中央寄せができます。

できあがったもの

これで中央配置ができました。

絶対値で位置を指定するため、横方向はleft: 50%transform: translateX(-50%)で良いのですが、縦位置の調整が難しいではないかと思います。

今回のサンプルではtop:0としていますが、目的の場所に配置しようと思ったら微調整が必要になります。

また、親要素にposition: relative;を設定しないと思わぬ場所に配置されてしまいます。

また、2つ以上の要素を縦に並べようとすると、それぞれ調整が必要になるので、実用的でないと思います。

• 関連記事
• テキストやボタンを右寄せにする方法（6パターン）
• https://www.ws-pilgrimage.jp/blog/webcreate/2580/