中央揃えの手法とその使う場面

1　margin: auto;

中央揃えしたい要素

中央揃えしたい要素がブロック要素の時

ただし、この中央揃えしたい要素にはしっかり幅を設定してあげておいてください

See the Pen margin: auto; by Kazuhito Nakayama (@kazuhito-nakayama) on CodePen.

中央揃えしたい要素の親要素

中央揃えしたい要素がインライン要素の時

ただし、インライン要素にdisplay: blockをかけてブロック要素にしてしまう別解もあります

中央揃えしたい要素の親要素に

index.html

position: relative;

中央揃えしたい要素の親要素に

index.css

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

中央揃えしたい要素は、ブロック要素でもインライン要素でも使える。

See the Pen position by Kazuhito Nakayama (@kazuhito-nakayama) on CodePen.

author: Kazuhito Nakayama twitter