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

  • Posted on
  • Category : Tips
CSSでコンテンツの中央配置を実装する方法

左右・上下左右などCSSで要素やコンテンツの中央配置(中央寄せ)を実装する方法を備忘録も兼ねて幾つか紹介します。どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。

ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。
また、領域がわかりやすいようにdiv class="child"にはグレーの背景色を指定しています。

HTML

<div class="parent">
	<div class="child">Lorem ipsum dolor sit amet.</div>
</div>

ここでの表示は全て画像を使用しており、実際の表示は以下デモページにまとめているのでこちらをご覧ください。

※念のため記載しておくと、デモページはスマートフォンなどではなくPCでの閲覧推奨(推奨というかスマートフォンではまともにページを確認できないです…)で、その際にChromeで閲覧してもらったほうが全ての動きを確認することができると思います。

※ブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものも含まれています。

※各サンプルソースの記述で必要なプレフィックスがあれば各自で追記してください。
また、サンプルソースによっては幅や高さを指定しているものもあるのですが、実装する箇所によってはそれらは必要ありません。

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

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

CSS

.parent {
	text-align: center;
}

目次へ

2. text-align + inline-block

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

width + margin

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

CSS

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

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

目次へ

4. text-align + line-height

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

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

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

目次へ

6. absolute + margin #1

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

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

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

flexbox #1

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

CSS

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

目次へ

10. flexbox #2

flexbox #2

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

CSS

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

目次へ

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。