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

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

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


スポンサードリンク


 

方法1

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

子要素に下記CSSを指定。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 横幅;
height: 高さ;

position:absoluteの初期値(auto)を「0」に。

「margin:0;」により上下左右中央寄せが実現。

親要素にpositionを指定しなければ画面の上下左右中央に配置される。

 

方法2

transformを使用。基本は1と同じ。

CSSは下記。

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 横幅;
height: 高さ; 

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

 

方法3

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

display: table-cell;

table-cellではmarginが効かなくなってしまうので、包含要素で囲みマージンを指定。

 

 

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

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

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


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

全コンテンツ新着記事

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

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

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

     

    続きを読む

  • mac for excel クラッシュ時の一時保存フォルダの場所
  • macのexcelで作業をしている時、何かのエラーを叩いてしまった際、excelが急にクラッシュして強制終了なんてことがよくあります。

    そんな時、Office製品はしっかり一時保存データを残してくれています。

    macでの一時保存フォルダを備忘録で残しておきます。

    続きを読む

  • 【Photoshop】簡単にドット柄を作る
  • 最近、バナー広告などのお仕事が増えてきて、デザインに取り入れる頻度が増えてきたので、この機会にドット柄の作り方を備忘録で残しておきます。

    私の環境はPhotoshop CS6 for Macです。

    続きを読む