詳細な変換:translate(-50%、-50%)

これは実際にはディスプレイスメントアトリビュートです。translateX は x 軸方向に移動し、translateY は y 軸方向に移動します。translate 括弧内の 2 つのパラメータは、最初に x、次に y です。

この文の適用シナリオはブロックのセンタリングを実現することであり、具体的な実装は次のとおりです。

<style>
        .outer {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(75, 233, 27);
        }

        span {
            position: absolute;
            background-color: red;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
</style>

<body>
    <div class="outer">
        <span></span>
    </div>
</body>

コードの動作を説明します。

1. まず、外箱 .outer の幅と高さを設定します。親なので相対的な位置を設定します。デフォルトの位置は左上で、背景色は緑色に設定されています。

2. 均質性はサブ要素のスパンです。絶対に配置し、幅と高さを指定して、画面中央の右下隅に配置します (画面の中央に十字があると想像してください。このスパンは近いです)第 4 象限まで)、次に、transform プロパティを使用して、スパン自体の長さの 50% だけ左に移動し、スパン自体の長さの 50% だけ上に移動します。これにより、中央のボックスが次のようになります。中心にあります。このステップはブラウザのデバッグツールを使用して自分で調整でき、動的な効果を理解しやすいです

注: 絶対配置後、インライン要素のスパンはブロックレベルの要素になり、幅と高さを設定できるようになります。

レンダリングは次のとおりです。

このうち、真ん中の赤がスパンです

12/20/21 追加:

このようなブロックのセンタリングを実現するには、flex を学習した後は、面倒なのでやめてください。直接親ボックス ---->

ディスプレイ:フレックス;

整列項目:中央;

コンテンツの位置揃え:中央;

ブロックのセンタリングを実現できます。なぜこのようにブロックが中央に配置されているのかわからない場合は、ブラウザ開発ツールにアクセスすると、flex が設定された要素のラベルに flex のロゴが表示されるので、それをクリックしてスタイルを確認すると、選択によってフレックスレイアウトを設定します。ただコードを書いてページを更新するのではなく、非常に面倒です。

初心者向けですが、理解できる人には簡単だと思われるかもしれません

詳細な変換:translate(-50%、-50%)

注: 絶対配置後、インライン要素のスパンはブロックレベルの要素になり、幅と高さを設定できるようになります。

おすすめ