How to 中央揃え
～垂直方向編～
2016-02-12 by Orange Lion
実は鬼門の上下中央配置
しれっとデザインで垂直（上下）方向の中央配置をされると唇を噛みしめざるを得ません。
水平（左右）方向に比べると難易度は若干高めです。CSSだけで完結させる分には、条件も厳しめです。
求められる要件に合わせて、上手く使い分けていきましょう。
①line-heightを使う
一番手っ取り早いのは、heightと同じ値をline-heightに指定するこの方法です。
heightを指定するという条件のほか、上下揃えしたいものが一行で完結する必要があります。
単語レベルの見出しやナビゲーション向きの手段と言えます。
簡単な方法なので可能な限りこれで対処したいのですが、複数行になる可能性は無いか、よく確認しましょう。
①tableまたはdisplay:tableでvertical-alignを使う
vertical-alignはtext-alignと違って、table要素でないと思ったような効果が出ません。
tableを使っているならば問題ありませんが、それ以外の要素であればdisplay:tableとtable-cellを予めかけておきましょう。
table/table-cellの使い方を把握していないと、使いづらいかもしれません。
最近は褒められたものではありませんが、テーブルレイアウトをしている場合は①より簡単で早くて便利です。
③position:absoluteとmargin:autoを使う
前回の水平方向編で紹介した通り、上下の中央揃えもできます。
absoluteにして、top、bottom,を全て0に、marginを上下方向にautoにするだけで実現できます。
heightの指定をお忘れなく。
左右中央揃えと組み合わせて、left、right、top、bottomの全てを0に、
marginを全てautoにすることで上下左右中央揃えが実現できます。
【番外編】Flexboxを使う
モダンブラウザのみ対応すればよいのであれば是非使ってみたいのがFlexible Box Layout Module。
何度かCSS3策定の段階で仕様が変わっていて古いブラウザでは書き方が異なるほか、
IEは11から正式に対応しているものの不具合があったりと、まだ実務で使うには（体感的にですが）厳しい選択肢です。
ただ、左右の中央揃えは勿論、上下も中央配置が簡単にできて、さらに均等割付も出来るなど、
今までに比べると自由なレイアウトが可能になります。逆順に並べられるとか、面白いこともできます。
将来的には今まで紹介してきた手法に変わって台頭する方法となるでしょう。
暫くは従来方式で対応しつつ、Flexboxを大々的に使えるその日に向けて鍛錬の毎日が続きそうです。