CSS で「translate(-50%, -50%)」はどのようにして完璧なセンタリングを実現するのでしょうか?

「translate(-50%, -50%)」による要素の変換

Web 開発では、要素を中央に配置することが一般的なタスクになることがあります特に全画面画像やヒーローセクションの場合。この目的でよく使用される CSS スニペットは、.item { top: 50%; です。左: 50%。変換: 変換(-50%, -50%); }.

コードの分解

このコードの目標は、要素の中心をその親コン​​テナの中心に揃えることです。個々のコンポーネントに分類すると、

• 上位: 50%; left: 50%;: これにより、要素の上端と左端の位置が、それぞれ親の高さと幅の 50% に設定されます。変換を使用しない場合、要素の左上隅が親の中央に配置されます。
• transform: translation(-50%, -50%);: この変換は、要素を水平方向と後方方向にシフトします。垂直方向は、幅と高さの 50% だけ縮小されます。これにより、要素の中心が元の左上隅に効果的に移動します。

視覚的センタリング

これら 2 つのスタイル セットを組み合わせることで、要素の中心は正確に位置合わせされます。親のセンターです。この手法は、要素の寸法が動的であるか、事前に不明である場合に特に役立ちます。

実際の例

次のコード スニペットを考えてみましょう:

body {
  margin: 0;
  padding: 0;
}

.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%);
}

.parent 要素の上にマウスを置くと、.child::before 要素が幅の 50% だけ後方および上に移動します。と高さで、.child 要素の元の位置が明らかになります。これは、要素を視覚的にも数学的にも中央に配置する際の、translate(-50%, -50%) の効果を示しています。

以上がCSS で「translate(-50%, -50%)」はどのようにして完璧なセンタリングを実現するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。