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

1. text-align
2. text-align + inline-block
3. width + margin
4. text-align + line-height
5. table + table-cell
6. absolute + margin #1
7. absolute + margin #2
8. absolute + transform
9. flexbox #1
10. flexbox #2

1. text-align

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

CSS

.parent {
	text-align: center;
}

目次へ

2. text-align + inline-block

同じくtext-align: center;を用いて中央配置する方法なのですが、先ほどとは違いdiv class="child"に対してdisplay: inline-block;を指定することでこのような見栄えを実装できます。
内容によって領域が可変するようにしたいなどの理由でdiv class="child"の幅を指定することができないけれど中央配置したく、更にテキストは左からというレイアウトを組む時に便利です。

CSS

.parent {
	text-align: center;
}
.child {
	display: inline-block;
	text-align: left;
}

説明下手で伝わりづらいかもしれませんが、先ほどの場合はdiv class="child"がブロック要素なために、テキストが少ししかなくても背景色が横いっぱいに表示されていました。
それと比べてこちらの場合は中央配置はさせつつ、display: inline-block;を使うことでテキストの長さによって背景色が表示される領域を限定させるといったことが可能になります。
div class="child"に記述しているtext-align: left;の記述はテキストをそのままセンタリングさせたい場合は必要ないのですが、この画像のように位置は中央でもテキストは左からという見栄えにするために記述をします。

目次へ

3. width + margin

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

CSS

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

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

目次へ

4. text-align + line-height

text-align: center;で左右中央にしつつ、更にline-heightを組み合わせることで上下でも中央にする方法です。
実装には下記のように記述し、line-heightに指定する数値は親要素のや表示したい領域の高さやを指定します。

※ここではdiv class="parent"の高さが300pxある想定にします。

CSS

.child {
	text-align: center;
	line-height: 300px;
}

ただし、この実装方法には注意が必要で、確実にdiv class="child"の内容が2行以上になる又は2行以上になる可能性があるという場合は使えないので、上の画像のようにテキストが1行の場合に使える方法になります。

目次へ

5. table + table-cell

こちらも「3. width + margin」と同様で利用する機会が多いと思う方法で、display: table;とdisplay: table-cell;を使用することでコンテンツを上下左右の中央配置を実装できます。

この方法であればdiv class="child"の幅や高さなどの指定がなくてもコンテンツを上下左右中央配置することが可能で、コンテンツの中身がセンタリングされるのを防ぎたい場合はdiv class="child"の中にもうひとつdivを作るなどして、そこにtext-align: left;を指定すれば意図した見栄えにできます。

CSS

.parent {
	display: table;
	width: 100%;
	height: 100%;
}
.child {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

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

目次へ

6. absolute + margin #1

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

CSS

.parent {
	position: relative;
	width: 100%;
	height: 100%;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
}

このサンプルではdiv class="child"の幅と高さがそれぞれ200pxとなっているので、その半分の100pxをmargin-top: -100px;とmargin-left: -100px;のようにネガティブマージンとして指定することで実装できます。

目次へ

7. absolute + margin #2

こちらの方法もposition: absolute;を使う方法になるのですが、やはりコンテンツを上下中央で配置したいという場合にはdiv class="child"に幅と高さの指定が必要になります。

CSS

.parent {
	position: relative;
	width: 100%;
	height: 100%;
}
.child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
}

目次へ

8. absolute + transform

IE8など気にする必要がなければ個人的によく利用している方法で、div class="child"に幅や高さの指定をしなくても簡単に上下左右で中央配置を実装できる方法です。
ここでは上下左右で中央配置する方法として書いていますが、left: 50%;を消してtop: 50%;のみを使用し、transformの方もtransform: translateY(-50%);のように書き換えれば上下で中央という形にすることができます。

CSS

.parent {
	position: relative;
	width: 100%;
	height: 100%;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

目次へ

9. flexbox #1

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

CSS

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

目次へ

10. flexbox #2

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

CSS

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

目次へ