この文字を中央に揃えたい！　画像を画面の中央に配置したい！など、ホームページを制作する中で必ずと言っていいほど出現する中央揃え。ひと言で中央揃えと言っても、そのシーンによって様々です。ここではその中央揃えをパターン別にご紹介していきます。ご紹介する中で、「インライン」や「ブロック」という用語が出てきますので「それってなぁに？」という方は先ずはこちらをご確認下さい。

• 横方向（左右）の中央揃え
  • ・text-align: center;
  • ・margin: 0 auto;
  • ・display: inline-block;
• 縦方向（上下）中央揃え
  • ・vertical-align: middle;
  • ・position: absolute;
• 上下左右（ど真ん中）中央揃え
  • ・position: absolute;
  • ・display: flex;

横方向（左右）の中央揃え

例えば、以下のようなHTMLとCSSがあったとします。

<div class="sample">
 <span class="item">ここが中身です</span>
</div>

.sample{
 text-align:center;
}

この例で例えると、【ここが中身です】のテキストを中央に寄せるには、インライン要素（この例では<span>〜</span>）を囲んでいる親であるブロック要素（この例では<div>〜</div>）に対してtext-align:centerを指定するだけです。

分かりやすいように今回の例のブロック要素（div)に線を付け、中身のインライン要素（span)に背景色をつけると、表示結果は以下のようになります。

中の要素が横方向の真ん中に配置出来ましたね。

次に、ブロック要素（この例ではdiv)に幅（この例では200px）を指定し、それを画面の中央に配置するにはどうすれば良いのでしょう？

何も指定しないと、

200pxの幅は指定出来ても位置は左に寄ってしまいます。

ブロック要素（この例ではdiv)自体を中央に配置するには、ブロック要素の左右のmarginをautoにしてあげることで中央寄せにすることができます。

<div class="sample">
 <span class="item">ここが中身です</span>
</div>

.sample{
 text-align:center;
 width: 200px;
 margin:0 auto;
}

無事、真ん中に配置されましたね。widthの指定は単位「%」での指定も可能です。

display: inline-block; はインライン要素とブロック要素を併せ持った要素になります。
ここでインライン要素とブロック要素の特徴を簡単に振り返ってみます。

次にインラインブロック要素を見ていきましょう。

インライン要素とブロック要素のいいとこ取りですね。

では実際どういう時に使うのか具体的に見ていきます。

以下のように要素を横に並べたい場合、

ブロック要素だと、それぞれの要素間に改行が入ってしまい他で対応する必要があります。逆にインライン要素だと、幅や高さ・余白を自由に指定できません。そんな時にこのinline-blockが便利というわけです。

<div class="sample">
 <span class="item">1</span>
 <span class="item">2</span>
 <span class="item">3</span>
</div>

.sample{
 text-align:center;
}
.item{
 border: 1px solid #368caa;
 display: inline-block;
 width:20%;
 height:30px;
}

縦方向（上下）中央揃え

vertical-align はインライン要素、インラインブロック要素、表のセル要素だけに適用されます。

値には、行全体の縦方向を中央に揃えるmiddle以外にもtop、bottomなどのキーワードがあります。

vertical-align: middle;（中央揃え）の場合

<div>
 <div class="item">横に並んだ高さの異なる複数の要素を中央に揃えます。</div>
 <div class="item">このBOXは短い文章。</div>
 <div class="item">この3つはvertical-align: middle;が適用されてるので縦のラインが中央で揃います。</div>
</div>

.item{
 background: #fff;
 border: 1px solid #368caa;
 display: inline-block;
 margin: 10px 0; 
 padding: 10px; 
 width: 30%; 
 vertical-align: middle;
}

vertical-align: top;（上揃え）の場合

vertical-align: bottom;（下揃え）の場合

absoluteを使って縦方向中央に配置するには、まず親要素をposition:relative;に指定します。
そして中央寄せにしたい要素をposition:absolute;にしてtop:50%;で親要素の上から50％に移動させます。

position:absolute; top:50%;だけだと…

そうなんです。top:50%だけだと、親要素の縦方向50%の位置に子要素の頂点が来て子要素の縦の長さは含まれないので、真ん中の配置になりません。

真ん中にするには、transform: translateY(-50%);でズレを補正してあげる必要があります。

transform: translateY(-50%);を追加

HTML＆CSSは、以下のようになります。

<div class="sample">
 <div class="item">今度は縦ラインの真ん中に来ました！</div>
</div>

.sample{
 position:relative;
 border: 1px solid #368caa;
 height: 150px;
}
.item{
 position:absolute;
 top:50%;
 transform: translateY(-50%);
 background: #fff;
 border: 1px solid #368caa;
}

上下左右（ど真ん中）中央揃え

先程のposition: absolute;とtransformの応用です。先程は縦方向の中央でしたが、この方法は左右中央寄せも可能なので、ど真ん中を実現できます。

具体的には、absolute + top: 50% + left: 50% + transform: translate(-50%,-50%)で親要素の上下左右中央（ど真ん中）に配置出来ます。

<div class="sample">
 <div class="item">上下左右ど真ん中！</div>
</div>

.sample{
 position:relative;
 border: 1px solid #368caa;
 height: 150px;
}
.item{
 position:absolute;
 top:50%;
 left: 50%;
 transform : translate(-50%,-50%);
 background: #fff;
 border: 1px solid #368caa;
}

flexboxは、真ん中に配置するのがとても簡単！「flexbox」についてはこちらの記事も参考にして下さい。

使い方は、親要素のdisplay:flex;に、justify-content: center（横方向）、align-items: center（縦方向）を指定します。

<div class="sample">
 <div class="item">display:flex;で、ど真ん中！</div>
</div>

.sample{
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid #368caa;
 height: 150px;
}
.item{
 background: #fff;
 border: 1px solid #368caa;
}

まとめ

以上、CSSで中央揃えのパターンをお届けしました。
画像や文章などによって上下の中央、左右の中央、画面上の中央など様々かと思います。

今回ご紹介した方法はレスポンシブでも使いやすい基本的なものをご紹介しました。デザインに合わせて最適な方法をお選び下さい。