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

2020年8月10日2023年1月22日

marginにautoを指定すると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を付与した場合は以下のように記述します。
margin:autoとleft:0pxとright: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がオススメ！同僚に差をつけよう！