CSSでコンテンツの中央配置を実装する方法

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