画像を画面の中央に配置したい!など、ホームページを制作する中で必ずと言っていいほど出現する中央揃え。ひと言で中央揃えと言っても、そのシーンによって様々です。ここではその中央揃えをパターン別にご紹介していきます。ご紹介する中で、「インライン」や「ブロック」という用語が出てきますので「それってなぁに?」という方は先ずはこちらをご確認下さい。ちなみに、HTML5では「インライン要素」「ブロックレベル要素」という概念はなくなりましたが、表示形式としての「インライン」や「ブロック」は残っています。center;例えば、以下のようなHTMLとCSSがあったとします。text-align:center;}この例で例えると、【ここが中身です】のテキストを中央に寄せるには、インライン要素(この例では<span>〜</span>)を囲んでいる親であるブロック要素(この例では<div>〜</div>)に対してtext-align:centerを指定するだけです。分かりやすいように今回の例のブロック要素(div)に線を付け、中身のインライン要素(span)に背景色をつけると、表示結果は以下のようになります。ここが中身です中の要素が横方向の真ん中に配置出来ましたね。auto;次に、ブロック要素(この例ではdiv)に幅(この例では200px)を指定し、それを画面の中央に配置するにはどうすれば良いのでしょう?何も指定しないと、ここが中身です200pxの幅は指定出来ても位置は左に寄ってしまいます。ブロック要素(この例ではdiv)自体を中央に配置するには、ブロック要素の左右のmarginをautoにしてあげることで中央寄せにすることができます。auto;}ここが中身です無事、真ん中に配置されましたね。widthの指定は単位「%」での指定も可能です。auto;は親であるブロック要素に対しての中央寄せということです。autoを指定してるのに真ん中に来ないという場合、親要素がインライン要素になっていないか確認して下さい。<img>、<select>、<button>などの幅(width)を指定できるものと、<span>、<a>、<strong>などの幅(width)や高さ(height)の指定が出来ないものがあります。auto;は効かないのでテキストこのように左寄せのままです。インライン要素を中央に配置するにはdisplay:blockを追加し、ブロック要素として扱います。auto;}テキストdisplay:block;を追加することで真ん中に配置されます。インライン要素とブロック要素を併せ持った要素になります。ここでインライン要素とブロック要素の特徴を簡単に振り返ってみます。・要素の幅は要素が収まるピッタリの大きさ。・要素同士が横に並ぶ。・幅(width)と高さ(height)が指定できない。・余白(margin-bottom、top)が指定できない。※上下にpaddingやborderに関しては1行の高さを超える大きさを設定すると上下の行に重なる。・要素の幅は親要素の幅いっぱいになる。・要素同士が縦に並ぶ。・幅(width)と高さ(height)が指定できる。・余白(padding・margin)が指定できる。次にインラインブロック要素を見ていきましょう。・要素の幅は要素が収まるピッタリの大きさ。・要素同士が横に並ぶ。・幅(width)と高さ(height)が指定できる。・余白(padding・margin)が指定できる。inline-block;を指定した親要素にtext-alignが使える。inline-block;を指定した親要素にvertical-alignが使える。インライン要素とブロック要素のいいとこ取りですね。実際どういう時に使うのか具体的に見ていきます。3ブロック要素だと、それぞれの要素間に改行が入ってしまい他で対応する必要があります。逆にインライン要素だと、幅や高さ・余白を自由に指定できません。そんな時にこのinline-blockが便利というわけです。インライン要素、インラインブロック要素、表のセル要素だけに適用されます。値には、行全体の縦方向を中央に揃えるmiddle以外にもtop、bottomなどのキーワードがあります。横に並んだ高さの異なる複数の要素を中央に揃えます。このBOXは短い文章。middle;が適用されてるので縦のラインが中央で揃います。class="item">横に並んだ高さの異なる複数の要素を中央に揃えます。class="item">このBOXは短い文章。middle;が適用されてるので縦のラインが中央で揃います。横に並んだ高さの異なる複数の要素を上揃えにします。このBOXは短い文章。top;が適用されてるので縦のラインが上で揃います。横に並んだ高さの異なる複数の要素を下揃えにします。このBOXは短い文章。bottom;が適用されてるので縦のラインが下で揃います。absolute;absoluteを使って縦方向中央に配置するには、まず親要素をposition:relative;に指定します。中央寄せにしたい要素をposition:absolute;にしてtop:50%;で親要素の上から50%に移動させます。top:50%;だけだと...よく見ると上ラインが中央になってるだけ...そうなんです。top:50%だけだと、親要素の縦方向50%の位置に子要素の頂点が来て子要素の縦の長さは含まれないので、真ん中の配置になりません。translateY(-50%);でズレを補正してあげる必要があります。今度は縦ラインの真ん中に来ました!HTML&CSSは、以下のようになります。absolute;とtransformの応用です。先程は縦方向の中央でしたが、この方法は左右中央寄せも可能なので、ど真ん中を実現できます。translate(-50%,-50%)で親要素の上下左右中央(ど真ん中)に配置出来ます。flex;flexboxは、真ん中に配置するのがとても簡単!「flexbox」についてはこちらの記事も参考にして下さい。center(縦方向)を指定します。#368caa;}まとめ以上、CSSで中央揃えのパターンをお届けしました。画像や文章などによって上下の中央、左右の中央、画面上の中央など様々かと思います。今回ご紹介した方法はレスポンシブでも使いやすい基本的なものをご紹介しました。デザインに合わせて最適な方法をお選び下さい。