CSS `transform: translation(-50%, -50%)` はどのようにして要素を中央に配置しますか?

CSS Transform プロパティの理解:translate(-50%, -50%)

ヒーロー画像または全画面要素を操作する場合、次のような CSS コードがよく見られます:

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この CSS スニペットこのコードは実際に何をするのでしょうか?

translate(-50%, -50%)の役割

変換の目的:translate( -50%、-50%) プロパティは、要素を特定の場所に変換または移動します。この場合、要素は水平方向と垂直方向の両方に変換されます。

水平方向の変換:translateX(-50%)

変換の最初の部分、 translationX(-50%) は、要素を幅の 50% 左に移動します。これは、要素の左端を親コンテナの中心に移動することと同じです。

垂直方向の移動:translateY(-50%)

移動の 2 番目の部分、translateY(-50%)、要素をその高さの 50% 上に移動します。これは、要素の上端を親コンテナの中心に移動することと同じです。

要素を中央に配置

これらを組み合わせると、translate(-50%, -50%) ) 要素の中心をその親コン​​テナの中心に効果的に移動します。これは、水平方向と垂直方向の両方で視覚的に中央に配置される要素を作成するためによく使用されます。

概念実証

概念を説明するために、次のコード スニペットを検討してください。

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

子要素を親要素の中に配置すると、水平方向と垂直方向の両方で中央に配置されることがわかります。これは、transform:translate(-50%, -50%) プロパティが子要素の中心を親コンテナの中心に移動したためです。

以上がCSS `transform: translation(-50%, -50%)` はどのようにして要素を中央に配置しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。