CSSで真ん中寄せするシンプルな方法【備忘録】

display:flex;を使用する

親要素に下記のCSSを適用する。

display: flex;
/* 水平方向中央寄せ */
justify-content: center;
/* 垂直方向中央寄せ */
align-items: center;

親要素にposition:relative;を適用しているという前提。

子要素のwidthやheightが0だと、translate:-50% -50%;が利かないので注意。

position:absolute;
left:50%;
top:50%;
translate:-50% -50%;