【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…