CSSで垂直方向と水平方向の中央揃えを行う方法は何ですか?

今回は、CSSの縦方向と横方向の中央揃えの方法と、CSSの縦方向と横方向の中央揃えの注意点について紹介します。以下は実際のケースです。

CSSの中央揃え

• コードではブラウザのプレフィックスが省略されています

• 以下の例は私の個人的な基準で並べ替えています

• もちろん、もっと中央揃えの方法もありますが、これらの 5 つの方法のみが最も完全な解決策です

フレックスセンタリング

利点: 不明な高さをセンタリングできる

<style>
    .wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
    
    .other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><h2 id="这是第二层的内容-不会居中">这是第二层的内容 不会居中</h2>
    

位置 + センタリングを移動

利点: 未知の高さをセンタリングできるセンタリング処理、最小限のネストレイヤー

<style>
    /* position 可选 absolute|fixed*/
    .center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
    
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>

テーブルセルのセンタリング

短所: 1. センタリングレイヤーは幅 (.center) を設定する必要があります。 2. 外側のレイヤー (.cell) にもう 1 つのレイヤーをネストします。 3. 中心レイヤーの幅を設定する必要があります (% 許可)

<style>
    .wrap{display: table;width: 100%;height: 100%;}
    .cell{display: table-cell;vertical-align:middle;}
    .center{width: 400px;margin-left:auto;margin-right:auto;}
    .other{background-color: #ccc;  height: 400px;} /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><p>
            </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>
        
    

従来の中央揃え (2 種類)

欠点: 1. 余白の値は自動でなければなりません。 2. 中央レイヤーは固定の高さと幅を持つ必要があります (% は許可されます) 3. Position

<style>
    /*
        1. left、top、right、bottom 可以任意,但必须相等
        2. position 可选 absolute|fixed
    */
    .center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>

を使用する必要があります 欠点: 中央レイヤーは固定の高さと幅を持つ必要があり、magin は高さと幅から計算する必要があります。 。

<style>
    .wrap{position: relative;height: 100%;}
    .center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>
    

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

再描画と再配置の使用方法

キャンバスを使用して回転太極拳アニメーションを作成する方法

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