CSSで垂直方向と水平方向の中央揃えを実現する方法

この記事では、CSS で垂直方向と水平方向の中央揃えを実現する方法を主に紹介します。これは、必要な友人に共有して参考にすることができます。これを実現するための CSS は、特に筆記試験の問題では、垂直方向と水平方向の中央揃えが必要になることがよくあります。

CSS で垂直方向と水平方向の中央揃えを実現する 3 つの方法

1. コンテナー表示内の要素: inline/inline-block

この状況は、コンテナーの text-align を直接設定して水平方向の中央揃えを実現することができます。コンテンツ要素。垂直方向のセンタリングを設定するには、コンテナの高さを設定してから、次のように簡単な line-height===height を設定する必要があります:

     <p class="container">
        <span>this is text</span>
     </p>

    .container{    
        text-align: center;        
        height: 50px;        
        background: green;        
        line-height: 50px;    
        }

2. コンテナ内の要素には表示があります。ブロックであり、要素の幅と高さはわかっています

この場合 次に、これを実現するために、position 属性とオフセットの設定を組み合わせて使用​​します。まずコンテナの位置を相対に設定し、要素の位置を絶対に設定してから、要素のオフセット (.inner-box) を top、left、margin-top、margin-left に設定します。ここで、top と left は に設定されます。 50%、および margin -top/margin-left のオフセットは、要素自体の高さ/幅の半分であり、負の値です。

コードは次のとおりです:

    <p class="container">
        <p class="inner-box"></p>
    </p>

    .container {        
        height: 200px;        
        width: 200px;        
        background: pink;        
        position: relative;    
        }

    .inner-box {       
     position: absolute;        
     top: 50%;        
     left: 50%;        
     margin-top: -50px;        
     margin-left: -50px;        
     height: 100px;        
     width: 100px;        
     background: green;    
     }

3. コンテナ内の要素はdisplay:blockであり、要素の幅と高さは不明です

この方法は方法2と似ていますが、違いは効果です。コンテナ内の要素の幅と高さが不明であるため、 margin-top/left offset を設定してもこれを実現できません。今回はleft/top/bottom/right:0を設定し、次にmargin:autoを設定します。

コードは次のとおりです:

    <p class="container">
        <p class="inner-box"></p>
    </p>

    .container {        
        height: 200px;            
        width: 200px;            
        background: pink;            
        position: relative;        
        }

    .inner-box {     
       position: absolute;        
       height: 100px;        
       width: 100px;        
       top: 0;        
       right: 0;        
       left: 0;        
       bottom: 0;        
       margin: auto;        
       background: green;    
       }

後で説明します

垂直方向と水平方向の中央揃えを実現する方法はたくさんありますが、translate を設定したり、flex レイアウトを使用したりすることもできますが、上記の方法の方が互換性があります。不備等ございましたら、遠慮なくご指摘ください。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS を使用してさまざまな中央揃え方法を実現します

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