CSS の垂直方向と水平方向のセンタリングに最適な 5 つのソリューション

この記事では、CSS の垂直方向と水平方向の中央揃えに関する 5 つの最適なソリューションと、それぞれの長所と短所を主に説明します。この記事が必要な方は参考にしていただければ幸いです。

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>

table -cellセンタリング

短所: 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>
    

関連する推奨事項:

モーダル ボックスを作成するときにコンテンツを垂直方向と水平方向の中央に配置するにはどうすればよいですか?

CSSを使用してテキストと画像の垂直方向と水平方向の中央揃えを実現することについて

CSSを使用して垂直方向と水平方向の中央揃えを完璧に実現する6つの方法の紹介

以上がCSS の垂直方向と水平方向のセンタリングに最適な 5 つのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。