ホームページ > 記事 > ウェブフロントエンド > CSS の垂直方向と水平方向のセンタリングに最適な 5 つのソリューション

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

小云云オリジナル: 2018-01-13 10:02:461508ブラウズ

この記事では、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 class="wrap">
    <p class="other">
        <h2>这是第二层的内容 不会居中</h2>
    </p>
</p>

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

利点: 最小限のネストレベルで未知の高さをセンタリングできる

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

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 class="wrap">
    <p class="cell">
        <p class="center other">
            <h2>这一层的内容 不会居中</h2>
        </p>
    </p>
</p>

従来の中央揃え (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 class="center other">
    <h2>这一层的内容 不会居中</h2>
</p>

を使用する必要があります欠点: 中央レイヤーは固定の高さと幅を持つ必要があり、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 class="wrap">
    <p class="center other">
        <h2>这一层的内容 不会居中</h2>
    </p>
</p>

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

関連記事