今回は、CSSにおける、「position:absolute」の中央寄せをご紹介します。
＊親要素に対する「relative」の記述は省略します。
クリックできる目次
［１］左右（横方向）における中央寄せ
子要素{
position: absolute;
left: 0;
right: 0;
margin: auto;
}
［2］上下（縦方向）における中央寄せ
子要素{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
［3］上下左右ともに中央寄せ
子要素{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
注意点
position: relative; の確認
これは初歩的な注意点ですが。
position: absolute;とposition: relative;をセットで使う場合があります。
そのとき、これ（relative）ってどこに設定すればいいの？
とふと疑問に思った人もいるかと思います。
position: relative;は親要素に設定します。
ですので、position: absolute;を設定したのに、
うまくいかない人は、
position: relative;が、
ちゃんと親要素に設定されているか、
親要素以外に設定されていないか、
再度確認してみてください。
50％の落とし穴
中央寄せだから、
left:50%;（あるいは top:50%;） だよね。簡単じゃん。
と設定しても、うまくいかない人もいるはずです。
このposition: absolute;は、動かしたい要素の「左上の角」が基準になるんです。
なので、 left:50%; を設定して、中央にくるのは、動かした要素の「左上の角」なんです。
left:50%; だと、下のように、「あれ、右寄りじゃん」と感じる（というか、そうなっている）はずなんです。
＠＠＠＠＠＠＠＠＠＠（親要素）
子子子子子子（子要素）
ですから、本当の意味で（というとちょっとおかしいですが）中央に位置するためには、
left:50%; を設定した後に、
動かし要素の「大きさの半個分」を、左にずらさないといけません。
そのためには、
transform: translateX(-50%); （縦方向ならXをYに変えます。）
を left:50%; の下に追記しましょう。
＠＠＠＠＠＠＠＠＠＠＠＠（親要素）
子子子子子子（子要素）
そうすると、中央に来ます。
まとめ
以上３つ方法を紹介しました。
いかがでしょうか。
簡単ですよね。
もっと詳しい記述が知りたい方はこちらをどうぞ。
https://cotodama.co/position-absolute-center/
(すごく丁寧な説明をしてくれているのでとてもわかりやすいです)