ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。
その場合どのように配置しているでしょうか。
インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、
pタグのようなボックス要素の中にテキストを入れたい場合、
うまいこと配置できないことがあり、
今回は、縦方向の中央揃えについて調べてみました。
<p class="box">DEMO</p>
.box {
width: 180px;
height: 180px;
border: 1px solid #ccc;
vertical-align: middle; /* 「vertical-align」を指定してもテキストは縦方向中央揃いにならない */
text-align: center;
}
上のHTML、CSSをつかって、新たにCSSを追加していきたいと思います。
テキストが1行のみで「line-height」を使う場合
確実にテキストが1行のみという時は、line-heightがシンプルでいいですね。しかし、テキストが2行以上になってしまった場合は崩れてしまうので注意が必要です。
.line-height {
line-height: 180px;
}
「display: table-cell」を使う場合
「display: table-cell」を使ってテキストを縦方向の中央に揃えたい場合は、
height、vertical-alignの指定が必要になります。今回の場合、heightは.boxにすでに指定してあるので、
.table-cell {
display: table-cell; /* IE8から使用可能 */
vertical-align: middle;
}
を新たに追加することで、テキストを縦方向中央揃えにすることが出来ました。
注意することはtable-cellはIE8から対応ということです。
Flexible boxを使う
「display: flex;」、
「align-items: center;」、
「justify-content: center;」を組み合わせることによってテキストを縦と横方向の中央に揃えることもできます。
新たに追加したCSSは下記になリます。
.flexiblebox {
display: -webkit-flex;
display: flex;
-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
align-items: center; /* 縦方向中央揃え */
-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
justify-content: center; /* 横方向中央揃え */
}
上に書いてあるCSSは各ブラウザの最新バージョンを対象とした書き方です。
Flexible boxはブラウザのバージョンによってプロパティが変わったりと扱い方が難しいです。ChromeやFirefoxの最新バージョンであれば気にする必要がありませんが、IEは最新バージョン（IE11）のみ対応、Safariは最新バージョンでさえベンダープレフィックスが必要になります。今の状態ではまだ使う機会が少なそうなのが残念です。
もし使う場合、「Autoprefixer」のようなWEBツールを使ってブラウザのバージョンごとの対応方法を調べることをおすすめします。
最後に
調べてみて分かったことは、Flexible boxがもっと多くのブラウザに対応していたら...と思いました。最新ブラウザになるとベンダープレフィックスを付けなくて良かったり、プロパティの数も減るので、バージョンの古いブラウザに比べると使いやすそうです。
Flexible boxには他にも便利なプロパティがあり、floatを使わずに要素を横並びにしたり、横並びにしたものを等間隔で並べるといったことも簡単に指定することが出来ます。現時点では対応ブラウザが限られてしまいますが今後使うことが増えていくかもしれません。
参考：
Flexible box対応ブラウザ
これからのCSSレイアウトはFlexboxで決まり！
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説