How to 中央揃え
～水平方向編～
2016-02-12 by Orange Lion
条件によって方法は様々！
ひとくちに「中央揃え」といっても、水平方向（左右）に対してのものなのか、
垂直方向（上下）に対してのものなのかで、方法が違ってきます。
また、実現手段も一つではありません。
今回は水平方向の中央揃えの手法を、諸条件と共に紹介していきます。
①text-alignを使う
HTMLのテキストを中央揃えするなら、text-align:center;を指定するのが手っ取り早いでしょう。
インライン要素であればtext-alignの設定が効きますので、imgもセンタリングすることができます。
リストを横並びにしたいときにも使われますね。
これはulまたはolにこれを指定し、liにはdisplay:inline-block;をかけるというもので、
本来ブロック要素のliをインラインのように振る舞わせることで実現させるレイアウトです。
liの数や幅に増減がある場合は、floatで横並びさせるよりも効果的なこともあります。
基礎的でありながら応用も効くニクイ奴です。
②marginを使う
最もポピュラーな手法がコレではないでしょうか。
divなどのブロック要素で、かつwidthが指定されているとき、
左右のmarginをautoにすると真ん中に配置することができます。
おおよそ、レイアウトの大枠に使う気がします。レイアウトって幅が大体決まっていますからね。
幅さえ決まっていればページネーションなどの細かなパーツにも使えて、とても汎用的です。
この方法を採用するにあたってのリスクもデメリットも小さいので、
他に厳しい条件がないのであれば、まずはこれを使いたいところです。
③position:absoluteとmargin:autoを使う
positionは癖があるので、きちんとした理解が必要なのですが、
absoluteにして、left、rightを全て0に、marginを左右方向にautoにすると左右中央に寄ります。
marginだけの手段同様、widthを決めておく必要があります。
この方法のいいところは、上下中央揃えにも使えるところです（詳細は次の記事に書きます）。
勿論組み合わせられるので上下左右中央という夢のような配置にも使えるのです。
上下中央配置にも繋がるのが一番の強みなので、ポップアップなどはこちらの方法を使うことが多いかもしれません。
ただ、positionを本当に理解していないと思わぬ壁にぶつかること請け合いなので、
駆け出しのHTML/CSSコーダーの方は先輩に使用を相談するようにしましょう。
【番外編】position:absoluteとネガティブマージンを使う
③の方法が浸透している今、影を潜めている方法ではあるのですが……一応紹介しておきます。
absoluteにするところとwidthの指定が必須なのは③と同じなのですが、
この方法ではleft:50%をかけ、さらにmargin-leftに「指定したwidthの半分」の値をネガティブマージンとして指定します。
例えば1000pxのdivであれば、margin-leftに-500pxを指定します。
上下中央揃えも、heightを指定し、top:50%とmargin-topに「指定したheightの半分」をネガティブマージンとして指定すれば実現できます。
計算をする必要があり、最近はそうでもありませんがネガティブマージンによりある程度のリスクが伴うなど、
とにかく使いづらい方法です。まず使わないでしょう。少なくとも私は使いたくないです。
ただ、昔は試行錯誤の末に結構使われていた方法みたいなので、古い案件やコードを触るときに備えて知っておいて悪くないと思います。
だいぶ長くなっちゃいました。次は垂直（上下）方向の中央揃えについて紹介します。