左右・上下左右など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を適用時の見栄え

テキストなどのインライン要素であればtext-align: center;で簡単に中央配置できます。
ここでは.parentに対して記述していますが、.childに指定しても同じ見栄えになります。

.parent {
  text-align: center;
}

text-align + inline-block

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

width + marginを適用時の見栄え

おそらく中央配置のレイアウトを組む際に最もよく利用されているのではないかと思う方法で、コンテンツの幅を指定して左右のmarginautoを指定することで中央配置を実装できます。

.child {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

ここではwidthの値に%を使用していますがpxなどでももちろん問題なく、またmarginに関しても短縮してmargin: 0 auto;のように記述しても実装できます。

text-align + line-height

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

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;
}

デモで使用したためにwidthheightを記述していますが、必要なければ記述する必要はありません。

absolute + margin #1

absolute + margin #1を適用時の見栄え

こちらはposition: absolute;とネガティブマージンを組み合わせて実装する方法です。
こちらの方法もコンテンツを上下左右で中央配置することが可能なのですが、.childに幅と高さの指定が必要になる点に注意が必要です。

このサンプルコードでは.childの幅と高さがそれぞれ200pxとなっているので、その半分の100pxmargin-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

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

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

Flexbox #1を適用時の見栄え

こちらもブラウザを気にしないでよければになりますが、幅や高さの指定がないコンテンツでも容易に上下左右で中央配置させることができる方法です。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Flexbox #2

Flexbox #2を適用時の見栄え

同じくFlexboxを利用した方法で、こちらも幅や高さの指定がないコンテンツでも上下左右で中央配置させることができます。
先ほどのもの以上に使えるブラウザは限られてくるのですが、一応こんな方法もあるということで紹介しました。

.parent {
  display: flex;
  height: 100%;
}
.child {
  margin: auto;
}