cssが真ん中にいること

1897 ワード
css html 中央にある レイアウト
cssを中心に多くの方法があり、ここでいくつかのベストプラクティスを書きます.コードは简単で乱暴で、适用性が强くて、あなたにこんな小さい事の悩みを必要としないで、あなたの仕事の効率を高めて、数分早く退勤して家に帰ってLOLは多くくだらないことを言わないで、直接コードに行きます
  • 基本的なスタイルとレイアウト
    • 
        
    
        
    
 
        .container {
        height: 200px;
        width: 200px;
        background: #369;
    }

    .inner {
        height: 50px;
        width: 50px;
        background: #963;
    }
  • 前後で最も簡単な2つの書き方
    •     
        1
    
    
    
        
    

        
    
    
    

    
        2
    
    
    
        
    
        
    
    
     .center1 {
        text-align: center;
    }

    .center-inner1 {
        display: inline-block;
    }

    .center2 {
        display: flex;
        justify-content: center;
    }

    .center-inner2 {
        display: inline-block;
    }
  • 垂直中央の2つの最も簡単な書き方
    •     1
    
    
    
        
    
    
    

    
        2
    
    
    
        
    
    
     .center3 {
        display: flex;
        align-items: center;
    }

    .center4 {
        position: relative;
    }

    .center-inner4 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
  • 左右中央+垂直中央
    •     
        +    
    
    
    
        
    
    
        .center5 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    コレクションをクリックして迷子にならないように気をつけてください
    cssは10種類のマウスのボタン移動効果を実現
    ASP.NETレコードエラーログ