中央寄せのやり方あれこれ【要素3選・文字揃え3選】

はじめに

CSSで中央寄せをするときに、条件が変わるとうまく行かなかったり、縦方向にうまく寄らなかったりして手が止まることがあるのではないでしょうか。

ここではCSSにおける中央寄せの方法について、必要な条件を確認しながらまとめてみました。

marginを指定する方法

まず思いつくのはこれではないでしょうか。

サイト全体のレイアウトを中央寄せするときなどに多用する方法ですね。

<div class="container">
	<div class="centering-inner">
		中央寄せのサンプルです。ここにテキストが入ります。<br />
		いろいろな中央寄せの方法がありますが、それぞれに特徴があります。
	</div>
</div>
.container {
    width: 100%;
    height: 150px;
    background: #40ce9a;
}

.centering-inner {
    width: 300px;
    margin: 0 auto;
    background: #d9f7de;
}
中央寄せのサンプルです。ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、それぞれに特徴があります。

この方法ではwidthの設定が必須ですが、単位を%やvwを設定することでレスポンシブに対応も可能です。

PCビューでの見た目を調整するためにmax-widthを設定するのも一般的です。

条件

左右の中央寄せのみ

子要素にwidthの設定

position: absolute;で指定する方法

上下の中央寄せも比較的簡単にできるので多用する方法です。

ただし、position: absolute;を指定する以上、親要素の大きさが中央寄せする要素を下回ったときにははみ出ることになるので、対策は必要になります。

ここではmargin: auto;を設定する方法と、transformを用いた方法を紹介します。

margin: auto;を設定する方法

position: absolute;にしておいて、上下左右の位置を0に設定します。

これにmargin: auto;を設定することで上下左右を中央寄せすることができます。

.container-absolute1 {
    position: relative;
    width: 100%;
    height: 200px;
    background: #40ce9a;
}

.centering-inner-absolute1 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
    left: 0;
    right: 0;
    height: 150px;
    margin: auto;
    background: #d9f7de;
}
中央寄せのサンプルです。ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、それぞれに特徴があります。

これはmargin: 0 auto;と同じくサイズの指定が必須となるため、文字数などが変化する要素には使いづらい印象です。

画像やアイコンなど、内容によってサイズが変動しないものに使うといいでしょう。

先ほども書いたとおり、親要素のheightを超えるとはみ出してしまいます。

中央寄せのサンプルです。ここにテキストが入ります。
要素の高さが超えてしまうとはみ出してしまいます。
条件

width,heightの設定が必須

親要素のheight指定が必須(親要素のサイズを超えるとはみ出します。)

transformを指定する方法

margin: auto;を使用する場合よりも柔軟性が高く、通常はこちらを使うほうがいいかもしれません。

.container-absolute2 {
    position: relative;
    width: 100%;
    height: 200px;
    background: #40ce9a;
}

.centering-inner-absolute2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 150px;
    background: #d9f7de;
}

このようにtopとleftに50%を指定して、transform: translate(-50%, -50%)と要素の大きさの半分戻します。

中央寄せのサンプルです。ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、それぞれに特徴があります。

注意点としては一部プレフィックスが必要なブラウザがあることと、マウスオーバーなどで動きをつけたい場合にその都度transformを指定する必要があることです。

マウスオーバーでtransform: scale(1.2);を適用します。
transform: translate(-50%, -50%);が上書きされて挙動がおかしくなります。
/* 誤 */
.centering-inner:hov {
        transform: scale(1.2);/* trasnformが上書きされてしまいます */
    }

/* 正 */
.centering-inner:hov {
        transform: scale(1.2), translate(-50%, -50%);/* このように新たに設定し直す必要があります */
    }
条件

親要素のheight指定が必須(親要素のheightを超えるとはみ出します。)

一部のブラウザではプレフィックスが必要

マウスオーバーなどでtransformを設定する場合にその都度設定が必要

display: flex;を指定する方法

flexboxは柔軟にボックスレイアウトを組める便利なプロパティです。

.container-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    background: #40ce9a;
}

.centering-inner-flex {
    width: 300px;
    background: #d9f7de;
}
中央寄せのサンプルです。
ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、
それぞれに特徴があります。

縦横の位置をcenterに設定することで中央寄せを設定できます。 IE9以下には対応していませんが、サポートが切れることを考えるとこれから先はあまり気にしなくてもいいかもしれません。

条件

一部対応しないブラウザがある(IE9以下)

文字を中央揃えにする方法

ここまでは要素の中央揃えについて述べましたが、文字を中央寄せにするには別の方法もあります。

text-align: center;

一番オーソドックスな方法ですね。

display: block;の要素は横幅いっぱいに広がるので、text-align: center;を設定するだけで中央寄せができます。

.container-text-align {
	width: 100%;
	height: 100px;
	background: #40ce9a;
	text-align: center;
}

.centering-inner-text-align {
	background: #d9f7de;
}
中央寄せのサンプルです。ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、それぞれに特徴があります。

display: inline-block;

上記の方法だと指定されたすべての文章が中央寄せになります。

例えば左寄せの文章を中央に配置したいときは、親要素にtext-align: center;を設定した上で、display: inline-block;を設定することで文章の中央寄せができます。

.container-inline-block {
	width: 100%;
	height: 150px;
	background: #40ce9a;
	text-align: center;
}

.centering-inner-inline-block {
	background: #d9f7de;
	display: inline-block;
	text-align: left;
}
中央寄せのサンプルです。
ここにテキストが入ります。
いろいろな中央寄せの方法がありますが、
それぞれに特徴があります。

文字の上下を中央揃えにする方法

heightを指定した要素の中で文字を上下中央寄せにするとき、思い通りに動かずに一度は手詰まったのではないでしょうか。

ここでは文字の上下中央寄せする方法について説明します。

vertical-align: middle;

私の中では思い通りにならずに困ったステータスの筆頭ですね。

このステータスを使えるのはinline要素・table-cell要素のどちらかしかありません。

このためテキストを上下中央寄せにするためには親要素にdisplay: table;を設定した上でdisplay: table-cellを指定します。

<div class="middle-wrapper">
	<div class="middle-item">タイトル</div>
	<p class="middle-text">
		<b>display: table-cell;</b><br />
		複数の要素を横並びに配置するブロックにおいて、テキストを上下中央に寄せたいときに有効です。
	</p>
</div>
.middle-wrapper {
	display: table;
  width: 100%;
	max-width: 400px;
	height: 180px;
	border: 1px solid #777;
}

.middle-item {
	display: table-cell;
	width: 120px;
	padding: 0 1em;
	background: olivedrab;
	vertical-align: middle;
	color: #fff;
	text-align: center;
}

.middle-text {
	display: table-cell;
	padding: 0 1em;
	vertical-align: middle;
}
タイトル

display:table-cell;
複数の要素を横並びに配置するブロックにおいて、テキストを上下中央に寄せたいときに有効です。

もちろんひとつの要素でも使えますが、複数の要素を横並びで上下中央に設定したいときには特に有効な方法です。

条件

親要素をdisplay: table;とした上で、display: table-cell;を指定

要素の高さが決まっていて、複数の文字入り要素を中央に寄せるときに特に有効

line-height: (要素のheight);

ボタンの配置などでテキストが一行になることが決まっている場合は、要素を単独で使用できるのでこの方法が手っ取り早いと思います。要素単体で完結するのもいいですね。

<div class="center-line-height">1行の要素</div>
<div class="center-line-height">
	2行になると<br />
	はみ出します
</div>
.center-line-height {
	width: 200px;
	height: 40px;
	margin: 40px auto;
	background: olivedrab;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
}
1行の要素
2行になると
はみ出します

複数行にわたる場合は表示が崩れるので使えません。今後の拡張などで複数行に渡る文字列が入る可能性があるときは注意が必要です。

条件

文字列が1行の場合

要素単体で済ませたい場合

padding-top(bottom)を設定

高さが変化しないときにはpaddingを設定するのが結果的に早かったりします。テキストの行数が変化するときはテキストの量に合わせて高さが変化します。

<div class="center-padding">1行の要素</div>
<div class="center-padding">
	2行になっても<br />
	はみ出さなーい
</div>
.center-padding {
	box-sizing: border-box;
	width: 200px;/* 行数に対応してheightを変更したいときはheightを指定しません。*/
	margin: 40px auto;
	padding: 11px 0;/* padding-top:11px + line-height:18px + padding-bottom:11px = 40px */
	background: olivedrab;
	line-height: 18px;
  font-size: 16px;
	text-align: center;
	border-radius: 20px;
}
1行の要素
2行になっても
はみ出さなーい

font-sizeやline-heightは位置や文字の位置に影響を受けるので、先に文字周りを整えてからpaddingを決めていきましょう。

条件

要素単体で済ませたい場合で、複数行にわたる文字列が発生する可能性がある場合

まとめ

要素を中央寄せにする方法の条件です。

中央寄せの方法条件・特徴
margin: 0 auto 全体のレイアウトを取るときに多用
横の中央寄せのみ
position: absolute;
margin: auto;
width,heightの設定が必須
親要素のheight指定が必須(親要素のサイズを超えるとはみ出します)
position: absolute;
transform: translate(-50%, -50%);
一部のブラウザではプレフィックスが必要
マウスオーバーなどでtransformを設定する場合はその都度設定が必要
親要素のheight指定が必須(親要素のサイズを超えるとはみ出します)
display: flex; 対応しないブラウザあり(IE9以下)

文字を中央寄せにする方法の条件です。

中央寄せの方法条件・特徴
vertical-align: middle;親要素をdisplay: table;とした上で、display: table-cell;を指定
要素の高さが決まっていて、複数の文字入り要素を中央に寄せるときに特に有効
line-height: (要素のheight);要素単体で済ませたい場合
文字列が1行の場合
padding-top(bottom)を設定 要素単体で済ませたい場合で、複数行にわたる文字列が発生する可能性がある場合

おわりに

中央揃えのやり方はさまざまあります。

条件によって使えたり使えなかったりするので、引き出しを多く持っておいて使い分ける必要がありますね。

「どれが使えたかな?」と思い出すときにこの記事が参考になってくれれば幸いです。

ではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です