中央揃え[Webデザイン]

5431 ワード

Webデザインテキストリンク

使用場所

<div class="wrapper">
  <div class="item"></div>
</div>

.wrapper{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: blue;
}
.item{
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

利益をautoにするには、width、heightの値を指定する必要があります.
このメソッドでは、サイト拡張時に要素を中央に配置することは保証されません.

拡大しても中央揃え

親要素の幅が100%の場合のみ使用可能

.wrapper {
  position: relative;
  height: 400px;
  background-color: blue;
}
.item {
  width: 500px;
  height: 300px;
  background: orange;
  position: absolute;
  top: 40px;
  left: 50%;
  font-size: 200px;
  text-align: center;
  margin-left: -250px;
}

親要素の幅が100%の場合は、子要素を左側の50%に移動し、左側に負の境界で幅の半分を与えます.
マイナス利益の代わりにtransform: translateX(-50%);を使うこともできます

Reference

この問題について(中央揃え[Webデザイン]), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdgus3160/웹디자인-가운데-배치

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

3月2日#学習日記

[21327][伯俊/BOJ]7576号トマト