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

「Transform:translate(-50%, -50%)」の役割を理解する

ヒーロー画像や要素を扱う場合、画面全体にまたがる場合、次のような CSS コードがよく見られます。

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

しかし、このコードは実際には何をするのか達成?

このコードを理解する鍵は、要素の中心をその親の中心に揃えていることを認識することです。これは以下によって実現されます:

• translateX(-50%): 要素を幅の 50% 左に移動し、X 軸に沿って効果的に中央に配置します。
• translateY(-50%): 要素を上方向に 50% 移動します。

要素をその幅と高さの半分だけ左上に移動すると、要素の中心が親の中心と揃えられ、水平方向の両方が実現されます。

これを説明するには、次のコード スニペットを考えてみましょう。

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

上にカーソルを置いたとき親要素であるゴースト要素 (.child::before) は、transform:translate(-50%, -50%) プロパティを適用することで視覚的に中央に配置されます。

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