【CSS】ボタンを親要素に対して上下中央に寄せる

要素を上下左右中央に寄せる方法です。

positionとtransformを使う

親要素に対して、垂直・水平方向共に50%の位置にボタンを配置したのち、transformで中心へ移動させます。

See the Pen
jOOpzdz
by ryoko (@ryo0613)
on CodePen.

display:flex;を使う

複数の要素を並べるのに使用するflexですが、ひとつの要素を中央に置きたい時にも使えます。縦はalign-items、横はjustify-contentで揃えます。

See the Pen
yLLqKWx
by ryoko (@ryo0613)
on CodePen.

おすすめ