【CSS】position:absoluteを使って上下左右中央ぞろえ

やりたいこと

画像を表示するモーダルを作成していて、コンテンツを画面の中央に設置したい

経緯

いつも真ん中に置くのに苦労している。
左右中央はいいんだけど、上下中央がすんなりいかない。
こちらのサイトの内容がドンピシャだったので、備忘録に。
https://cotodama.co/position-absolute-center/

実装

周りの要素は省く

html

<div class="modal-content">
    <img src="url">
</div>

css

.modal-content {
    /* 高さ・幅はお好みで */
    height: 50%;
    width: fit-content;

    /* これで真ん中 */
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

img {
    /* 画像の高さもお好みだけど、はみださないよう
    親要素より大きくならないようにしておくのがおすすめ */
    max-height: 100%;
}

こんな感じ。

おまけ

width: fit-content;で子要素の幅に合わせてくれるので、
子要素の画像のサイズになってくれる。
親要素が大きいと、モーダルを閉じる動きがうまくいかなかったので、設定しておきたかった。