[CSS] display: table-cell;を利用した垂直・水平方向の中央寄せ：tableプロパティの特徴
marginを利用する場合の問題点
- 水平方向にしかセンタリングできない
- 対象要素の横幅がわかっている場合しかセンタリングできない
よって、垂直方向にセンタリングしたい場合や対象要素の横幅がわからない（もしくは可変である）場合は、table-cellを利用する。
使い方
センタリングしたい要素の親要素に以下のプロパティを設定。
（サイズは任意）
width: 200px; height: 200px; display: table-cell; text-align: center; vertical-align: middle;
例
HTML
<div class="ouka-sample-centering"> <div class="ouka-sample-target"></div> </div>
CSS
.ouka-sample-centering {
width: 200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.ouka-sample-target {
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
}
table-cellは、対象要素をHTMLタグのtdと同じにするもの。
tdではその中身に対してtext-alignとvertical-alignが有効になるので、縦・横の両方向に中央寄せできる。
vertical-alignは通常、インライン要素そのものに指定するものだが、td・table-cellの場合のみその内容の位置が変わる（参考）。
逆に、センタリングしたい対象要素にvertical-alignを設定しても効果が出ないので注意しよう。
なお、text-alignが有効になるのは対象要素がインライン要素の場合のみ。対象要素がブロック要素の場合は、かわりに親要素ではなく対象要素に「margin: 0 auto;」を指定する。
.ouka-sample-centering {
width: 200px;
height: 200px;
display: table-cell;
/* text-align: center; */
vertical-align: middle;
border: 1px solid black;
}
.ouka-sample-target {
display: inline-block;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: red;
}
注意点
しかし、あくまでtdと同じなので、幅と高さをパーセント「%」で指定すると、うまく動作しない。
これは、td（table-cell）のサイズを決定する際、そのテーブル関連の親要素に依存するため。
HTMLのテーブルが「table > tr > td」の形でなければならないように、本来CSSのtable関連プロパティもそのようにしなければならない。
table > table-row > table-cell
要は、table-row・table-cellのサイズは、tableプロパティの大きさに依存するということ。
table関連プロパティの特徴
- 単独でtable-row、table-cellの幅・高さを%で指定しても効果が出ない
- table-rowは、ピクセル（px）で指定しても幅に関しては効果が出ない（高さのみ）：幅は、中身（td、table-cell）しだいのため
- table-cellにサイズを指定しなかった場合、親要素がtableならばそのサイズいっぱいにまで広がる
対処法
3の特徴を活かし、センタリングしたい対象要素の親要素（table-cell）をさらにtableで囲い、それに幅と高さを指定する。
HTML
<div class="ouka-sample-container"> <div class="ouka-sample-centering"> <div class="ouka-sample-target"></div> </div> </div>
CSS
.ouka-sample-container {
display: table;
width: 50%;
height: 50%;
border: 3px solid blue;
}
.ouka-sample-centering {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 3px solid green;
}
.ouka-sample-target {
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
}
ラッパー（コンテナ）をインライン要素にしたい場合は、tableではなく「display: inline-table;」を指定する。
inline-blockと同じく、サイズを指定可能なインライン要素になる。