CSS で要素を親要素の中央に表示する方法についての簡単な説明

CSS で要素を垂直方向の中央に配置する方法についての質問は、すでによくある質問です。新人でもベテランでも、面接の際によく聞かれる質問です。 2 日前に Flex ビデオ チュートリアルを見ていたところ、要素の中央揃えについて言及されていたので、今日はいくつかの一般的な方法を見ていきます。欠点があれば批判して修正してください (すべてのコードは私が入力したものであり、利用可能です)

1. 水平方向のセンタリング (マージン: 0 auto;)

これについては、トレーニング中であっても、誰もが最も慣れていないはずです。授業はまだ自習です。これは教師が最初に教える方法（水平方向）のはずですが、ラップされた要素は浮動属性を持つことができないという前提があります。それ以外の場合、このプロパティは無効になります。具体的には以下のコードになります:

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
        }
        item{            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>

    <p>
        </p><p></p>
     

<br>

2. 水平方向のセンタリング(text-align: center;)

この属性がfloatでない場合は、inline/inline-blockに変換できます。 . 次に、親要素に text-align:center; 属性を追加して中央揃えにします

3. 水平方向と垂直方向の中央揃え (1) 子要素は親要素に対して相対的に配置されます。マージン値が減算されます。自身の幅と高さの半分です

このメソッドには、子要素自体の幅と高さを知っている必要があるため、一定の制限があります

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;            text-align:center;
        }
        item{            display:inline/inline-block;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>

    <p>
        </p><p></p>
     

4. 2) 子要素は親要素に対する相対位置であり、マージン値は自動です

この方法は要素の幅と高さに制限されず、使いやすい(推奨)です

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

5. 水平方向と垂直方向のセンタリング (3) 表示: table-cell

この方法は、要素をテーブル スタイルに変換し、テーブル スタイルを使用してセンタリングする方法です (推奨)

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

6. 水平方向と垂直方向のセンタリング (4) 絶対配置とトランスフォーム

この方法は、CSS3 の変形を使用することを使用します。もちろん、素晴らしいものには互換性の問題があることはご存知でしょう

7. 水平方向と垂直方向の中央揃え (5) CSS3 の flex 属性

この属性は非常に便利ですが、互換性の問題が確実にあります。注意してください

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
        }
        item{
            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

突然、センタリングの方法がとても簡単だと感じましたか？ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！

CSS の要素を親要素の中央に配置する方法の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。