CSSによる位置決め要素の中央揃えの実現方法

絶対位置決め要素の中央揃えの実装
CSSが絶対的な位置決め要素の中央効果を実現する方法を聞くと、多くの人が心の中で答えを持っている.
一、
互換性の良い主流の使い方は:

.element {   
     width: 600px; height: 400px;   
     position: absolute; left: 50%; top: 50%;   
     margin-top: -200px;    /*       */  
     margin-left: -300px;    /*       */  
 }  

しかし、この方法には明らかな不足があり、元素のサイズを事前に知る必要がある.そうでなければmargin負の値の調整は正確ではありません.この場合、JSを利用して入手することが多い.
二、
CSS 3の勃興は、marginの代わりにtransformを使用することをより良い解決方法とした.transformのtranslateオフセットのパーセンテージ値は、自身のサイズに対してです.したがって、次のことができます.

.element {   
     width: 600px; height: 400px;   
     position: absolute; left: 50%; top: 50%;   
     transform: translate(-50%, -50%);    /* 50%         */  
 } 

したがって、絶対位置要素のサイズにかかわらず、水平方向に垂直に中央に表示されます.
しかし、問題は明らかで、互換性が悪い.IE 10+およびその他の現代ブラウザではサポートされていません.中国で盛んに行われているIE 8ブラウザが無視されるのは適切ではない(携帯電話のweb開発は無視できる).
三、
実際には、絶対位置決め要素の中央実装には、margin:autoを実現する上での寸法適応および互換性を比較する別の方法があると言える.
margin:auto絶対位置決め要素の中央揃えを実現
まず、CSSコードを見てみましょう.

.element {   
    width: 600px; height: 400px;   
    position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0;   
    margin: auto;    /*            */  
}

コードの2つのキー:

     0    ；
margin: auto

そこで、真ん中になりました.上のコードのwidth:600 px height:400 pxは概略ですが、他のサイズに変更したり、サイズを設定したりしない(画像自体にサイズが含まれている要素が必要です)は、中央に表示されます.おもしろい~~
Webサイトから転載:http://www.divcss5.com/css3-style/c50561.shtml