どうも、ソエです!
今回は、positionをabsoluteの時に中央揃えにするコードを書いていきます!

現在の卒業展で作っているもので、よく使うのでせっかくだから書いておこうと思って。

では、どうぞ!

中央揃えの書き方

HTML

HTMLでは、中央揃えにしたい要素を要素で囲みます。
今回は、div1-div1をposition:absolute;で中央揃えさせたいので、div1というclassでdiv要素で囲みます。

<div class=”div1”>
<div class=”div1-div1”></div>
</div>

CSS

position: absolute;は、親要素にstatic以外を付けていないとまずabsolute自体が効きません。
fixedはabsoluteと同じ絶対位置で、スクロール時固定の値。
残るrelativeを親要素につけます。

後は、位置を設定。
topとleftだけ接待すると、要素にwidthとheightをつけるとおかしくなるのでtranslateも忘れずに。

.div1{
position: relative;
}

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

終わりに

以上で、position: absolute;の時の中央揃えのコードは終わりです。

topとleftだけだと無理、なのは驚きですよね。
コピペして、ぜひ使ってみて下さい。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

position:absolute;の時の中央揃え