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

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

小云云
リリース: 2018-01-13 10:02:46
オリジナル
1573 人が閲覧しました

この記事では、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を使用してテキストと画像の垂直方向と水平方向の中央揃えを実現することについて

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート