【8/27まで】Udemyの人気コースが今なら1,200円から!!

【position: absolute】要素を上下左右中央揃えにする

【position_ absolute】要素を上下左右中央揃えにする

marginautoを指定するとCSSが自動的にブラウザーの幅を取得して、真ん中に表示されるようにしてくれます。

左右中央揃えしたい場合

CSSにmargin:auto;を追加します。

See the Pen
margin-auto
by shiakisudev (@shiakisu)
on CodePen.

CSS

div {
  margin :auto;
  height:100px;
  width: 100px;
  background-color:lime;
}

position:absoluteを付与した場合

position:absoluteを付与した場合は以下のように記述します。
margin:autoleft:0pxright:0pxを追加します。

See the Pen
margin-auto2
by shiakisudev (@shiakisu)
on CodePen.

CSS

div {
  margin :auto;
  position:absolute;
  left:0px;
  right:0px;
  height:100px;
  width: 100px;
  background-color:lime;
}

上下中央揃えしたい場合

CSSにmargin:auto;position:absolute;top:0;bottom:0;を追加します。

See the Pen
margin-auto2
by shiakisudev (@shiakisu)
on CodePen.

CSS

div {
  margin :auto;
  position: absolute;
  top:0;
  bottom:0;
  height:100px;
  width: 100px;
  background-color:lime;
}

上下左右中央揃えしたい場合

CSSにmargin:auto;position: absolute;top:0px;bottom:0px;left:0;right:0;を追加します。

See the Pen
margin-auto3
by shiakisudev (@shiakisu)
on CodePen.

CSS

div {
  margin :auto;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:100px;
  width: 100px;
  background-color:lime;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です