【備忘録】cssで上下中央にする方法

これまで使用したcssで上下中央に配置する方法をまとめました。

【１】テキストの場合（１行）

・height と line-height を同値で設定する。

 

【２】positionを使用する方法

・親要素に

position:relative;

height:○○;

を設定します。

・子要素（上下中央にしたい要素）に

position:absolute;

top: 0;

bottom; 0;

margin: auto 0;

を設定します。

以上で上下中央になります。

【おまけ】vertical-align:middle; を使用して揃える場合

・vertical-align プロパティはインライン要素かテーブルセルにしか効きません。

インライン要素は高さが設定できないので、displayでテーブルセルにしてから使用します。

height:○○;

display:table-cell;

vertical-align:middle;

で中央になります。