CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically.

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。

1. display:tableでの実装

CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。

HTML
<div class="table">
<p>p tag p tag p tag p tag p tag p tag</p>
</div>

<div class="table">
<div>
<h1>H1 text</h1>
<p>p tag p tag p tag p tag p tag p tag</p>
<a href="">LINK</a>
</div>
</div>

<div class="table">
<div><img src="images/img.png" alt=""></div>
</div>

CSS
.table{
width: 300px;
height: 300px;
background: #ccc;
display:table;
text-align: center;
}
.table > div{
display:table-cell;
vertical-align: middle;
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE8〜

2. display:inilne-block; (span)

CSSのdisplayプロパティによって要素をinilne-block化し、vertical-alignで縦方向へ中央配置する方法です。この方法ではspan要素をゴーストとして配置し、親要素の高さを取得する必要があります。

HTML
<div class="inline_block">
<span></span>
<p>p tag p tag p tag p tag p tag p tag</p>
</div>

<div class="inline_block">
<span></span>
<div>
<h1>H1 text</h1>
<p>p tag p tag p tag p tag p tag p tag</p>
<a href="">LINK</a>
</div>
</div>

<div class="inline_block">
<span></span>
<img src="images/img.png" alt="">
</div>

CSS

.inline_block{
width: 300px;
height: 300px;
background: #ccc;
display: block;
text-align: center;
}
.inline_block > *{
vertical-align: middle;
display: inline-block;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}
.inline_block span {
height: 100%;
width: 0px;
display: inline-block;
zoom: 1; /* Fix for IE7 */
*display: inline; /* Fix for IE7 */
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE7〜

3. display:inilne-block; (:before)

2で配置したspan要素を:before(疑似要素)で代替した方法です。HTMLは短くなりますがIE8以降推奨です。

HTML
<div class="inline_block_before">
<p>p tag p tag p tag p tag p tag p tag</p>
</div>

<div class="inline_block_before">
<div>
<h1>H1 text</h1>
<p>p tag p tag p tag p tag p tag p tag</p>
<a href="">LINK</a>
</div>
</div>

<div class="inline_block_before">
<img src="images/img.png" alt="">
</div>

CSS

.inline_block_before{
width: 300px;
height: 300px;
background: #ccc;
display: block;
text-align: center;
}
.inline_block_before > *{
vertical-align: middle;
display: inline-block;
}
.inline_block_before:before{
content: “”;
height: 100%;
vertical-align: middle;
width: 0px;
display: inline-block;
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE8〜

4. negative-margin

ネガティブマージンによるセンタリングは最もメジャーな方法かと思います。ただしセンタリングする要素の高さが不明な場合、javascriptをはさむ必要があるので決して万能ではありません。

HTML
<div class="n_margin ex1">
<p>p tag p tag p tag p tag p tag p tag</p>
</div>

<div class="n_margin ex2">
<div>
<h1>H1 text</h1>
<p>p tag p tag p tag p tag p tag p tag</p>
<a href="">LINK</a>
</div>
</div>

<div class="n_margin ex3">
<img src="images/img.png" alt="">
</div>

CSS

.n_margin{
position: relative;
width: 300px;
height: 300px;
background: #ccc;
}
.ex1 p{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
text-align: center;
margin: -0.5em 0 0 -100px;
}
.ex2 div{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
text-align: center;
margin: -55px 0 0 -100px;
}
.ex3 img{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
text-align: center;
margin: -50px 0 0 -50px;
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE7〜

5. line-height

センタリングする要素の行高を調整することで縦方向へのセンタリングを実現します。効果を発揮する要素が限られているので使い勝手には難があります。

HTML
<div class="line-height">
<p>p tag p tag p tag p tag p tag p tag</p>
</div>
CSS

.line-height{
width: 300px;
height: 300px;
background: #ccc;
text-align: center;
}
.line-height p{
line-height: 300px;
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE7〜

6. background-position

この方法は画像の場合のみ有効です。これまでの中央配置とは毛色が違いbackground-positionによって中央配置を実現しています。

HTML
<div class="background-position"></div>
CSS

.background-position{
width: 300px;
height: 300px;
background: url(images/img.png) no-repeat center #ccc;
}

対象ブラウザ
Chrome / Firefox / Safari / Opera / IE7〜

以上になります。実際にはこれ以外にもCSSのflexboxを使用する方法等ありますが現時点では十分に動作しませんので割愛しています。

参照:CSS Tricks|Centering in the Unknown