CSS水平、垂直中心の5つの最適案

2428 ワード

CSS中央揃え

コードには、ブラウザプレフィックス

が省略する.

以下の例は私の個人の標準で

並べ替えられています.

もちろんより多くの中央処理方法もありますが、この5つの方法だけが最も完璧な解決策だと思います.

利点:未知の高さを中心に処理





    
        これは2 の  が  に わない

利点:未知の高さを中央に処理でき、ネストされたレイヤの最小欠点:translateがGoogleカーネルの下に小数点(%が危険)を設定すると、文字のジッタ、ぼかしが発生します.(translate 3 d(-50%,-50%,0)を設定すると、ジッタブラーが依然として存在することを解決できます.




    この  の  は  に まらない

欠点:1.中央レイヤには幅(.center)を設定する必要があります.2.外層の複数のネスト層(.cell)3.中央レイヤの幅を設定する必要があります(%)




    

        
            この  の  は  に まらない

欠点:1.margin値はautoでなければなりません.2.中間層には、縦横を設定する必要があります(%)




    この  の  は  に まらない

欠点:中央レイヤは固定アスペクトを設定する必要があり、maginはアスペクト計算で計算する必要があります.




    
        この  の  は  に まらない