Categories: HTML&CSS

【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;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp