【CSS】絶対配置で要素の中央に配置する方法を解説

コーディング中、絶対配置 (position:absolute;) の要素を中央に配置したい、ということが時折あると思います。

親要素の幅が変動する場合でも上下中央、左右中央、上下左右中央に配置する方法を紹介します。

完成イメージ
実際のコードと解説

完成イメージ

ざっとこのような感じです。画像の上に絶対配置で”テキスト”を上に配置するイメージです。

画像では上下左右中央に配置していますが、上下だけ、左右だけ中央に配置する場合のコードもまとめています。ぜひ参考にしてください。

実際のコードと解説

使用するHTMＬ（3パターン共通）

<div class="area">
<p>テキスト</p>
<img src=xxx.jpg widht="800" height="400" alt="xxxx" >
</div>

ざっくりこのような感じです。

画像の上にpタグの中身を中央に配置していきます。

上下左右中央に配置したい場合

.area{
    position:relative;
}

.area p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

上下中央に配置したい場合

.area{
    position:relative;
}

.area p{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

左右中央に配置したい場合

.area{
    position:relative;
}

.area p{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}