CSSによるブラウザ互換の水平・垂直中央揃えの手法

no_mkd

1. 水平中央揃え

テキストや画像などのインライン要素の水平中央揃え

親要素に text-align: center; を設定します。例：DemoDemo

幅が固定されたブロック要素の水平中央揃え

margin-left: auto; margin-right: auto; を設定します。例：Demo

幅が固定されていないブロック要素の水平中央揃え

方法1

table 要素の幅自動計算の特性を利用し、margin-left: auto; margin-right: auto; を設定して実現します。例：Demo

方法2

ブロック要素を display: inline; に設定し、インライン要素として処理します（コンテナに text-align: center; を設定）。例：

方法3

コンテナに float: left; と position: relative; および left: 50%; を設定し、子要素に position: relative; と left: -50%; を設定します（横に並べる場合は任意で float: left; を追加）。

2. 垂直中央揃え

親要素の高さが固定されていないテキスト、画像、ブロック要素の垂直中央揃え

コンテナに padding-top = padding-bottom を設定するだけです。例：Demo

親要素の高さが固定されている単一行テキストの垂直中央揃え

line-height をコンテナの高さと同じに設定することで実現できます。例：Demo

親要素の高さが固定されている複数行テキスト、画像、ブロック要素の垂直中央揃え

方法1

table の子要素である th/td のデフォルトの vertical-align: middle; （table に height: 100%; を設定する必要があります）を利用して実現します。例：Demo

方法2

display: table-cell; に vertical-align: middle; を組み合わせ、さらに CSS ハックを加えて実現します。例：Demo

IE6/7向けの CSS ハック。有効性は未検証です。