CSSで可変幅の水平方向の中央揃えを実現する方法

方法: 1. フレックス レイアウトを使用し、ustify-content 属性と align-items 属性の両方を center に設定して中央揃えを実現します。2. 変換属性と位置属性を使用して中央揃えを実現します。3. table-cell を使用し、Table を使用します。セルセンタリング効果。

このチュートリアルの動作環境: Windows 7 システム、css3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「css ビデオ チュートリアル 」

css は可変幅の水平方向の中央揃えを実現します

方法 1: フレックスを使用する

誰もが最初に反応するのはフレックスかもしれません。記述方法がシンプルで直感的であり、互換性にも問題がないためです。携帯電話中心の第一候補です。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

2 つの主要な属性 (justify-content と align-items) を使用して、どちらも center に設定して中央揃えを実現します。

唯一の子要素を中央に配置するには、ここでの flex-center を親要素に掛ける必要があることに注意してください。

方法 2: 変換位置を使用する

この組み合わせは、画像を中央に配置するためによく使用されます。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

もちろん、親要素ラッパーの相対位置を子要素 img に移動し、絶対位置を置き換えることもできます。効果も同様です。

方法 3: table-cell

テーブルのセルの中央揃え効果を使用して表示します。 flex と同様に、親要素に記述する必要があります。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

方法 4: グリッド

表と同様、グリッド レイアウトを使用すると、行または列ごとに要素を配置できます。ただし、レイアウトの観点から見ると、グリッドはテーブルよりも可能であるか、単純です。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

ただし、互換性の点では flex ほど優れていません。特に IE ブラウザでは、IE10 以降のみがサポートされています。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSSで可変幅の水平方向の中央揃えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。