CSSで垂直方向と水平方向の中央揃えを行う方法は何ですか?-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-20 14:23:05

オリジナル

1583 人が閲覧しました

今回は、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 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>

ログイン後にコピー

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

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

ログイン後にコピー

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

推奨読書:

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

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

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