CSSで中央寄せをするときに、条件が変わるとうまく行かなかったり、縦方向にうまく寄らなかったりして手が止まることがあるのではないでしょうか。
ここではCSSにおける中央寄せの方法について、必要な条件を確認しながらまとめてみました。
まず思いつくのはこれではないでしょうか。
サイト全体のレイアウトを中央寄せするときなどに多用する方法ですね。
<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;を指定する以上、親要素の大きさが中央寄せする要素を下回ったときにははみ出ることになるので、対策は必要になります。
ここではmargin: auto;を設定する方法と、transformを用いた方法を紹介します。
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指定が必須（親要素のサイズを超えるとはみ出します。）
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: translate(-50%, -50%);が上書きされて挙動がおかしくなります。
/* 誤 */
.centering-inner:hov {
transform: scale(1.2);/* trasnformが上書きされてしまいます */
}
/* 正 */
.centering-inner:hov {
transform: scale(1.2), translate(-50%, -50%);/* このように新たに設定し直す必要があります */
}親要素のheight指定が必須（親要素のheightを超えるとはみ出します。）
一部のブラウザではプレフィックスが必要
マウスオーバーなどでtransformを設定する場合にその都度設定が必要
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以下）
ここまでは要素の中央揃えについて述べましたが、文字を中央寄せにするには別の方法もあります。
一番オーソドックスな方法ですね。
display: block;の要素は横幅いっぱいに広がるので、text-align: center;を設定するだけで中央寄せができます。
.container-text-align {
width: 100%;
height: 100px;
background: #40ce9a;
text-align: center;
}
.centering-inner-text-align {
background: #d9f7de;
}いろいろな中央寄せの方法がありますが、それぞれに特徴があります。
上記の方法だと指定されたすべての文章が中央寄せになります。
例えば左寄せの文章を中央に配置したいときは、親要素に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を指定した要素の中で文字を上下中央寄せにするとき、思い通りに動かずに一度は手詰まったのではないでしょうか。
ここでは文字の上下中央寄せする方法について説明します。
私の中では思い通りにならずに困ったステータスの筆頭ですね。
このステータスを使えるのは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;を指定
要素の高さが決まっていて、複数の文字入り要素を中央に寄せるときに特に有効
ボタンの配置などでテキストが一行になることが決まっている場合は、要素を単独で使用できるのでこの方法が手っ取り早いと思います。要素単体で完結するのもいいですね。
<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行の場合
要素単体で済ませたい場合
高さが変化しないときには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;
}はみ出さなーい
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)を設定 | 要素単体で済ませたい場合で、複数行にわたる文字列が発生する可能性がある場合 |
中央揃えのやり方はさまざまあります。
条件によって使えたり使えなかったりするので、引き出しを多く持っておいて使い分ける必要がありますね。
「どれが使えたかな？」と思い出すときにこの記事が参考になってくれれば幸いです。
ではまた。
