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

変換の魔法:translate(-50%, -50%)

大きな画像や全画面要素を扱う場合、 CSS 開発者は、次のような興味深いコード スニペットをよく使用します。

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

このコードの背後にある目的とその方法機能しますか?

transform プロパティは、元の参照点を基準にして要素の位置を移動します。この特定のケースでは、translate(-50%, -50%) は、X 軸と Y 軸の両方の要素をそのサイズの -50% だけ移動させます。

なぜこれが必要なのかを理解するために、これを分解してみましょう。コンポーネントに下に移動します:

• translateX(-50%): 要素を幅の 50% だけ左にシフトし、中心を移動します。前の左上隅をポイントします。
• translateY(-50%): 要素を高さの 50% 上に移動し、再び中心点を元の左上隅に戻します。

上と左を 50% に設定することで、最初に要素の左上隅を親コンテナの中央に移動します。ただし、これにより、要素の中心点は親の中心からオフセットされたままになります。

transform:translate(-50%, -50%) は、要素を左に戻し、上に半分だけシフトすることでこれを修正します。独自のサイズ。これにより、要素の中心点がその親の中心点と整列し、水平方向と垂直方向の完璧な中心合わせが実現されます。

効果を視覚化するには、次のコード スニペットにマウスを移動します:

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

親コンテナの上にマウスを置くと、中央に配置された要素の赤い「ゴースト」が所定の位置にスムーズに移動することに注目してください。これは、CSS で完璧なセンタリングを実現するために、transform:translate(-50%, -50%) を使用する方法を示しています。

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