Webフロントエンド入門から実戦:cssは縦中央のN種類のシーンとN種類の方法を実現する

inlineまたはinline-*の要素は、padding、line-height、vertical-alignなどのプロパティを使用して垂直に中央に配置できます.次の2つの具体的なシナリオがあります.

単行縦中央、例えば単行テキストまたはリンク

この場合、要素に同じサイズのpadding値を上下に追加することで、縦中央を実現します.

    
        ，      padding-top & padding-bottom  


body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 10px;
}

p {
    margin: 0;
    color: #fff;
    /*        padding          */
    padding-top: 100px;
    padding-bottom: 100px;
}
       Q-q-u-n：⑦⑧④-⑦⑧③- ①② ，                ，              
（               ，    ，            ）

paddingを使用したくない場合、paddingを使用するのが不便な場合は、要素にline-heightを設定して親コンテナの高さに等しくすることで、垂直中心を実現できます.親コンテナのpaddingとborderによる高さの変化を考慮することに注意してください.

複数の行が縦方向に中央にある、例えば、複数の行のテキスト

単行テキストと同じように、要素の上下に同じサイズのpadding値を追加するには、滴を使うほうがいいです.

    

                ，           padding  。

                    ，       。
    


body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 10px;
    padding-right: 10px;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*              padding  */
    padding-top: 40px;
    padding-bottom: 40px;
}

もう1つの方法は、tableのプロパティを使用することです.親コンテナをtableに設定し、縦中央の要素をtable-cellに設定し、vertical-alignプロパティを使用して中央に配置することができます.

    

                ，        table，             table-cell，      vertical-align   。
    


body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /*        table*/
    display: table;
}

p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*              table-cell*/
    display: table-cell;
    vertical-align: middle;
}
        
            translate    ，              ，         。

1.         

             ，    margin         ，        ：

/*         100px (       ，  80%)*/
height: 100px;

/*        ，              */
position: absolute;  
top: 50%;

/*    margin-top，              */
margin-top: -50px;  

    

        
             。
    
    


body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
    /*        position,                      */
    position: relative;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    height: 200px;
    /*              */
    position: absolute;
    top: 50%;
    margin-top: -100px; 
    /*      padding   border,        box-sizing: border-box;   */

}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}
       Q-q-u-n：⑦⑧④-⑦⑧③- ①② ，                ，              
（               ，    ，            ）

このコードの使用頻度はあまり高くないことを示します~そこでscssを使用する前提の下で、自分でmixinをカプセル化して、このような位置決め方式を実現するために専用します.

//           、    
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

//                ，               ，        margin-left    margin-top   
.content {
  @include abs_v_center(200px);
}

ブロックレベル要素高さ不定

上記の絶対位置決め中心を用いる方法の原理と同様であるが、要素の高さが不確定な場合、translateYによって要素を自身の高さの半分だけ上方に移動させ、さらに垂直中心を実現する.

/*                */
position: relative;  
top: 50%;

/*     translateY，              */
transform: translateY(-50%);  

    

        
   translateY        。
    
    


body {
    margin: 0;
}

.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
}

.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    /*    translateY，       */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

現在考えられているのは、これらの実装方法の大部分をカバーするのに十分であるはずです.もちろん、混合して使用することもできますが、具体的には、アプリケーションシーン次第です.