【初心者でもわかる】position: absolute;で上下中央に配置する方法をチキンラーメンを使って解説！

どうも、7noteです。今回はposition: absolute;で要素を上下左右中央に配置するお話。

「あー、お腹すいたなぁ（深夜2時）。」
「チキンラーメンでも食べるか。」
「じょぼぼぼぼ・・・（お湯を注ぐ）」

「・・・あっ、卵落とすの忘れてた！」
「この真ん中の卵ポケットに卵を・・・・しまった！！」

失敗例

「あーーー・・・」

みんなはこうならないために、
上下左右中央に卵を配置できるようposition: absolute;をマスターしよう！

材料はこちら(1人前)

作り方

1. index.htmlにラーメンの画像と卵の画像を用意。
2. style.cssで、卵の画像をラーメンの画像の上に重ねる。
3. style.cssで、上下左右中央に卵の画像を配置して出来上がり。

1.index.htmlにラーメンの画像と卵の画像を用意

<div class="donburi">
    <img src="chickenramen.png" alt="チキンラーメン">
    <img src="egg.png" alt="卵" class="egg">
</div>

2.style.cssで、卵の画像をラーメンの画像の上に重ねる。

  .donburi {
        width: 624px; /*ラーメンの画像の横幅と同じサイズを指定*/
        position: relative; /* .donburiの左上を基準点（0,0）と設定 */
    }
    .donburi .egg {
        position: absolute; /* 親要素の基準点（今回だと.donburi）を基準と認識させる */
        top: 0; /*基準点からの位置を上から0pxの位置に指定*/
        left: 0; /*基準点からの位置を左から0pxの位置に指定*/
    }

3. style.cssで、上下左右中央に卵の画像を配置して出来上がり。

 .donburi {
    width: 624px;
    position: relative;
}
.donburi .egg {
    position: absolute;

    /*--以下の値を変更--*/
    top: 50%; /*基準点からの位置を上から５０%の位置に指定*/
    left: 50%; /*基準点からの位置を左から５０%の位置に指定*/

    /*--以下のプロパティを追記--*/
    transform: translate(-50%,-50%);/*卵の画像の縦横の長さを100%とした時、-50%分、つまり画像の幅や高さの半分マイナス方向に表示位置をズラす*/
}

＼完成／

解説・作り方のコツ

• [transform: translate(-50%,-50%);]を書いている理由は、[top: 50%; left: 50%;]だけだとど真ん中にこないから。もしtransformがないと、ど真ん中にくるのは卵の画像の左上角が、ラーメン画像のど真ん中に来てしまう。だから卵の画像の真ん中がラーメンの画像の真ん中にくるようにするためかいています！
• [position: absolute;]を指定しているとき、上下左右中央の指定は親要素の大きさからみて中央にくるので、 今回は[.donburi]にラーメンの画像と同じサイズの624pxをwidthに当てています。

まとめ

チキンラーメンは美味しい。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！

おそまつ！