左右・上下左右などCSSで要素やコンテンツの中央配置(中央寄せ)を実装する方法を備忘録も兼ねていくつか紹介します。
どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。
はじめに
ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>
の部分を中央配置させるという内容になっています。
また、領域がわかりやすいように.child
にはグレーの背景色を指定しています。
<div class="parent">
<div class="child">Lorem ipsum dolor sit amet.</div>
</div>
ここでの表示は全て画像を使用しており、実際の表示は以下デモページにまとめているのでこちらをご覧ください。
注意点として、ブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものも含まれています。
また、プレフィックスは省略しているので必要があれば各自で追記していただき、サンプルソースによっては幅や高さを指定しているものもあるのですが、実装する箇所によってはそれらは必要ありません。
text-align
テキストなどのインライン要素であればtext-align: center;
で簡単に中央配置できます。
ここでは.parent
に対して記述していますが、.child
に指定しても同じ見栄えになります。
.parent {
text-align: center;
}
text-align + inline-block
同じくtext-align: center;
を用いて中央配置する方法なのですが、先ほどとは違い.child
に対してdisplay: inline-block;
を指定することでこのような見栄えを実装できます。
内容によって領域が可変するようにしたいなどの理由で.child
の幅を指定することができないけれど中央配置したく、更にテキストは左からというレイアウトを組む時に便利です。
.parent {
text-align: center;
}
.child {
display: inline-block;
text-align: left;
}
先ほどの場合は.child
がブロック要素なためにテキストが少ししかなくても背景色が横いっぱいに表示されていました。
それと比べてこちらの場合は中央配置はさせつつ、display: inline-block;
を使うことでテキストの長さによって背景色が表示される領域を限定させるといったことが可能になります。
.child
に記述しているtext-align: left;
の記述はテキストをそのままセンタリングさせたい場合は必要ないのですが、この画像のように位置は中央でもテキストは左からという見栄えにするために記述をします。
width + margin
おそらく中央配置のレイアウトを組む際に最もよく利用されているのではないかと思う方法で、コンテンツの幅を指定して左右のmargin
にauto
を指定することで中央配置を実装できます。
.child {
width: 60%;
margin-right: auto;
margin-left: auto;
}
ここではwidth
の値に%
を使用していますがpx
などでももちろん問題なく、またmargin
に関しても短縮してmargin: 0 auto;
のように記述しても実装できます。
text-align + line-height
text-align: center;
で左右中央にしつつ、更にline-height
を組み合わせることで上下でも中央にする方法です。
.parent
の高さが300px
ある想定だった場合に実装は下記のように記述し、line-height
に指定する数値は親要素のや表示したい領域の高さやを指定します。
.child {
text-align: center;
line-height: 300px;
}
ただし、この実装方法には注意が必要で、確実に.child
の内容が2行以上になる又は2行以上になる可能性があるという場合は使えないので、上の画像のようにテキストが1行の場合に使える方法になります。
table + table-cell
こちらも「3. width + margin」と同様で利用する機会が多いと思う方法で、display: table;
とdisplay: table-cell;
を使用することでコンテンツを上下左右の中央配置を実装できます。
この方法であれば.child
の幅や高さなどの指定がなくてもコンテンツを上下左右中央配置することが可能で、コンテンツの中身がセンタリングされるのを防ぎたい場合は.child
の中にもうひとつdiv
を作るなどして、そこにtext-align: left;
を指定すれば意図した見栄えにできます。
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
text-align: center;
vertical-align: middle;
}
デモで使用したためにwidth
とheight
を記述していますが、必要なければ記述する必要はありません。
absolute + margin #1
こちらはposition: absolute;
とネガティブマージンを組み合わせて実装する方法です。
こちらの方法もコンテンツを上下左右で中央配置することが可能なのですが、.child
に幅と高さの指定が必要になる点に注意が必要です。
このサンプルコードでは.child
の幅と高さがそれぞれ200px
となっているので、その半分の100px
をmargin-top: -100px;
とmargin-left: -100px;
のようにネガティブマージンとして指定することで実装できます。
.parent {
position: relative;
width: 100%;
height: 100%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
absolute + margin #2
こちらの方法もposition: absolute;
を使う方法になるのですが、やはりコンテンツを上下中央で配置したいという場合には.child
に幅と高さの指定が必要になります。
.parent {
position: relative;
width: 100%;
height: 100%;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
}
absolute + transform
IE8など気にする必要がなければ個人的によく利用している方法で、.child
に幅や高さの指定をしなくても簡単に上下左右で中央配置を実装できる方法です。
ここでは上下左右で中央配置する方法として書いていますが、left: 50%;
を消してtop: 50%;
のみを使用し、transform
の方もtransform: translateY(-50%);
のように書き換えれば上下で中央という形にすることができます。
.parent {
position: relative;
width: 100%;
height: 100%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Flexbox #1
こちらもブラウザを気にしないでよければになりますが、幅や高さの指定がないコンテンツでも容易に上下左右で中央配置させることができる方法です。
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Flexbox #2
同じくFlexboxを利用した方法で、こちらも幅や高さの指定がないコンテンツでも上下左右で中央配置させることができます。
先ほどのもの以上に使えるブラウザは限られてくるのですが、一応こんな方法もあるということで紹介しました。
.parent {
display: flex;
height: 100%;
}
.child {
margin: auto;
}