絶対配置で要素を中央揃えにする方法

2年 ago
桜, 春樹
1 minute

絶対位置の要素を完全に中央に配置するためのいくつかの解決策：

  1. top、left、bottom、right 及び margin プロパティを使用する
.absolute-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. フレックスボックスのプロパティを使用する
.parent-element {
  display: flex;
  align-items: center;
  justify-content: center;
}

.absolute-element {
  position: absolute;
}
  1. グリッドプロパティを使用してください
.parent-element {
  display: grid;
  place-items: center;
}

.absolute-element {
  position: absolute;
}
  1. 絶対配置で、要素の幅と高さを固定値にし、margin プロパティを使用します
.absolute-element {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px; /* 自定义宽度 */
  height: 200px; /* 自定义高度 */
  margin: -100px 0 0 -100px; /* 宽度和高度的一半 */
}

どの方法でも絶対に位置を決定した要素を親要素の中心に配置できます。具体的な方法の選択は、固有のレイアウト要請と互換性の要請に依存します。

bannerAds