css要素中央(水平、垂直)大全

1565 ワード
html+cssはフロントエンドの基礎スキルであり,これも純フロントエンド開発者とバックエンド回転フロントエンドの開発者の最大の違いである.要素の中央には、異なるビジネスシーンの要件の下で、異なる適応技術案があります.次は、jsを使用しない純粋なcssの一般的な要素の中央スキームです.
  • 親要素の幅が既知
  • 単行テキスト水平垂直中央
            ：
text-align: center;
line-height:      ;
  • サブエレメントが非ブロックレベルエレメントである水平中央
    •    ：
text-align: center;
  • サブエレメントは、非ブロックレベルエレメントが水平、垂直に中央(複数行のテキストを含む)
  • ie9+ 
    • .parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  • css 3は使用できません
  • サブエレメントの幅が広く知られている
    .parent{
   position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -    /2;
  margin-top: -     /2;
    • } 
    
  -        
    ```
                ie8        ，         ，                   ：
    html:
      
    
        
    
          
    
                 
    
                 
          
    
        
    
      
    
    css:
        .parent{
            height: 100px;
         }
        .child-wrap{
            line-height: 100px;
        }
        .child-content{
          display: inline-block;
          line-height: normal;
          vertical-align: middle;
        }
    ```

  • 親要素不明幅
    •     padding:        ;           ，     text-align: center;

    はい、よくあるミッドレンジソリューションは上記ですが、ビジネスシーンがあれば、上記のソリューションが実現できない場合は、私に連絡したり、メッセージをくれたりして、ありがとうございます.
    JSON.parse Function (JavaScript) and JSON.stringify Function (JavaScript)
    JavaScript:void(0)