ホームページ >ウェブフロントエンド >CSSチュートリアル >「transform: translation(-50%, -50%)」 はどのようにして要素を中央に配置しますか?
「Transform:translate(-50%, -50%)」の役割を理解する
ヒーロー画像や要素を扱う場合、画面全体にまたがる場合、次のような CSS コードがよく見られます。
.item { top: 50%; left: 50%; transform: translate(-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 サイトの他の関連記事を参照してください。