CSSのpositionプロパティがabsoluteに設定されている場合、どのようにして中央に配置するか。

1年 ago
夏樹, 風
1 minute

position: absoluteを使用する場合、要素を中央に配置する方法は次の通りです。

  1. トップ：50％
  2. 左: 50%
  3. transform: translate(-50％、-50％)

以下は、サンプルコードです。

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上記のコードでは、.parentは親要素を示し、.childは子要素を示します。親要素には幅と高さが設定され、背景色は灰色です。子要素はposition: absoluteを使用して配置され、top: 50%とleft: 50%で親要素の中心に左上隅を配置します。transform: translate(-50%, -50%)により、子要素は自身の幅と高さの半分だけ左上に移動し、子要素の中心が親要素の中心と一致します。

指定したコードを使用すると、子要素が親要素の中央に配置されます。

bannerAds