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

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

translateを使う

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

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

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

要素自体の高さと幅が未知でも対応できるのが利点だと思う。topleftの指定は、50vh50vwでもできると思う。(未確認)

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

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を利用することができる。

あとがき

どちらもお手軽なので、思いついた方でいいと思うが、transformを使ったら、animationtransformが使えなくなることは気をつけておいた方がいいだろう。

上下のみや左右のみのセンタリングは省いたが、上下か左右どちらかの指定を消せば、残った方向だけのセンタリングができる。

参考

タイトルとURLをコピーしました