絶対配置で中央揃えにするにはどうしたらいいですか?

絶対配置で中央揃えをするにはトリッキーな方法を使う必要があります。
2020年8月29日
ユーザー

以下のように.rectでmargin: auto;を使って、.rectを中央寄せさせたいのですがposition: absolute;がついていたら中央寄せされずに左寄せのままとなってしまいます。
こちら中央寄せさせるにはどのようにしたらよいでしょうか?

<div class="box2">
  <div class="rect"></div>
</div>
.box2 {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  position: relative;
}

.rect {
  width: 50px;
  height: 20px;
  background-color: lime;
  position: absolute;
  margin: auto;
}

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(16)