【HTML CSS】親要素内での子要素の上下左右中央揃え

WEBデザインをしている中で、「親要素」に対して「子要素」を上下左右中央に配置したいことがよくあります。

その時の備忘録としてここに残しておきます。

スポンサーリンク

方法1

display:flexを使う

フレックスボックス(フレキシブルボックス)「display: flex」を親要素に指定し、「justify-content: center;」と「align-items: center;」で上下中央寄せを実現します。

See the Pen 【display:flex】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

方法2

positionを使う

親要素に position:static(初期値)以外を指定。

See the Pen 【position】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

position: absoluteの、「top」「right」「bottom」「left」の値を初期値(auto)以外に指定。

margin: auto;」により上下左右中央寄せが実現します。

横方向のみであれば、親要素にposition: absolute;は不要です。

 

方法3

positionとtransformを使う

方法2にtransformを組み合わせて指定します。

See the Pen 【position+transform】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

親要素、または画面を基準に「上、左の0値から50%ずつ移動」させ、「translate(X方向の距離, Y方向の距離)」を使用し、移動させる要素の50%分をX方向にマイナス移動、Y方向にマイナス移動で結果的に上下左右中央が実現されるという仕組みです。

 

方法4

table-cellを使う

中央揃えしたい要素に「table-cell」を指定。

table-cellを指定した要素はmarginが効かなくなるので、もう一つのdiv要素で囲うことで解決します。

See the Pen 【display:table-cell】親要素内の中央寄せ by cape (@C-A-P-E-DESIGN) on CodePen.

薄いグレーが囲っているdiv要素になります。

 

参考にさせて頂きました。

CSSで中央寄せの方法いろいろメモ – Qiita

CSSで中央寄せあれこれをメモ。text-alignで横方向中央寄せインラインの子要素を左右中央寄せにします。.center{ border: 1px solid #aaa; width: 4…


最後までお読みいただき、ありがとうございます。

投稿日: 2017-06-17
カテゴリー: CSS | 投稿者: NOR
 

全コンテンツ新着記事

  • iPhone Xに機種変更して気付いたiTunesの落とし穴
  • 2017年11月3日発売だったiPhoneX(アイフォーン10)。

    予約開始が同年10月27日16:01からだったので、私は15:59から携帯を握りしめ、16:00:45から予約ページの更新を繰り返しながら、ページが表示されるとすぐ予約の申込みを完了しました。

    その成果あってか、発売日の11月3日の午前中には受け取りにいくことができました。

     

    続きを読む