絶対位置中央

1、互換性の良い主流cssの絶対的な位置付けの中央の使い方:

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

この方法には明らかな不足があり,元素のサイズを事前に知る必要がある.そうでなければmargin負の値の調整は正確ではありません.この場合、JSを利用して入手することが多い.
2、marginの代わりにtransformを使用する:

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

transformにおけるtranslateオフセットのパーセンテージ値は、自身のサイズに対して、cssの絶対位置決めを中央にすることができる.
3、margin:auto絶対位置決め要素の中央を実現する

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;
}

4,div幅不明1

  

    

          

          ，   
    
  

2,div幅不明2

    
  
   


.outer {
    position: relative; /* or absolute */  
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

ps:ie 8以上のブラウザに適した方法