CSS で水平方向と垂直方向の中央揃えを実現する 4 つの方法

この記事では主にCSSの水平方向と垂直方向の中央揃えを実装する4つの方法を紹介します。計画では幅と高さも指定しましたが、幅と高さが固定されるという意味ではありません。しかし、幅と高さを与えないと効果が見えないと思いました。このソリューションが幅と高さを固定しないという事実は、このソリューションを使用した後、親要素と子要素の幅と高さが変更された場合でも、水平方向と垂直方向の中央位置が保証されることを意味します。

次の 4 つの解決策はすべて、親要素または子要素の幅と高さが変更された場合でも、水平方向と垂直方向の中央揃えのレイアウトが維持されます。

オプション 1: 配置

html

         <p class="father">
            <p class="son"></p>
         </p>

css

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

オプション 2: flex

html 変更なし

        <p class="father">
            <p class="son"></p>
        </p>

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

オプション 3: テーブル レイアウト

親要素を display:table- に設定する必要があります。 cell、vertical と text-align を使用して、すべてのインライン ブロック レベル要素を水平方向と垂直方向に中央揃えにします
子要素の表示を設定します: inline-block

html 変更なし

  <p class="father">
        <p class="son"></p>
    </p>

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

オプション 4: グリッド レイアウト (最新のバージョンでサポートされています)ブラウザ)

html は変更されません

        <p class="father">
            <p class="son"></p>
        </p>

css は変更されません

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

関連する推奨事項:

HTML 要素の水平方向と垂直方向の中央揃えを設定する方法

水平方向と垂直方向の中央揃えを実現する方法に関する CSS コードの共有そして両端の位置合わせ

CSS で水平方向と垂直方向の中央揃えを実現するいくつかの方法の紹介

以上がCSS で水平方向と垂直方向の中央揃えを実現する 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。