position:absolute;の要素中央寄せ

Last updated at 2025-03-16Posted at 2020-12-14

画像の上にテキストボックスの要素を作り、position: absolute;　を指定した時、重ねた要素を中央寄せにしたかったのですが、どうやるんだっけ？となってしまったので、忘れないよう自分用にメモしておきます。

イメージ

ちなみにこれは、要素を上に重ねて中央寄せにした後、
top: -〇〇%とマイナスに配置しています。

左右を中央寄せにする場合

CSS

.example {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

左右のポジションを0にして、marginで中央に寄せている、という感じです。

もしくは、

CSS

.example {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

でも可能。
transformプロパティを使用して、表示位置のX軸を-50%分移動させています。

CSS

.example {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

これも、さっきの逆で同じ考え方です。
上下のポジションを0にして、marginで中央に寄せています。

もしくは、

CSS

.example {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

でも可能。
transformプロパティを使用して、表示位置のY軸を-50%分移動させています。

CSS

.example {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

上下左右のポジションを0にして、marginで中央寄せ。

もしくは、

CSS

.example {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

でも可能。
transformプロパティを使用して、表示位置の上下左右-50%分移動させています。

top、left、right、bottomの指定だとうまくいかないこともあるので、その時はtransformプロパティを使用してみるといいです。
上下左右の中央寄せは結構使うので、このメモが誰かの役に立てばいいな、、笑