CSSで垂直方向と水平方向の中央揃えを実現する方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-12 15:34:41

オリジナル

2423 人が閲覧しました

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

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

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

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

this is text

ログイン後にコピー

    .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 のオフセットは、要素自体の高さ/幅の半分であり、負の値です。

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

ログイン後にコピー

    .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を設定します。

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

ログイン後にコピー

    .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 レイアウトを使用したりすることもできますが、上記の方法の方が互換性があります。不備等ございましたら、遠慮なくご指摘ください。