CSS position: absolute;の要素の中央寄せの2種の方法

position: absolute;な要素の中央寄せのメモ

2021/01追記: 各見出しを修正

translateを使う
margin: auto;を使う
あとがき
参考

translateを使う

調べてみると、transform: translate(-50%);を使ったものが多い。

#parent {
    position: relative;
    /* 他の指定 */
}

#target {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    /* 他の指定 */
}

要素自体の高さと幅が未知でも対応できるのが利点だと思う。topとleftの指定は、50vhと50vwでもできると思う。（未確認）

しかし、transformをanimationで使っている時はうまくいかない。

margin: auto;を使う

ブロック要素に対して行うよくあるセンタリング。これがposition: absolute;でも使えるとは考えが及ばなかった。absoluteの時は、topなどの4つの位置指定が必要になる。

#parent {
    position: relative;
    /* 他の指定 */
}
#target {
    position: absolute;
    width: <xx>px;
    height: <xx>px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* 他の指定 */
}

transformを使わないので、animationを利用することができる。