絶対配置された、可変幅の、中心に置かれたHMTL要素

Question

私はページ内の要素のサイズに収まるように縮小し、ページ上に中央に表示するポップアップライトボックスを作成しようとしています。これまでのところ私が持っている：今

.lightboxVariable{ 
    display:block; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    width : auto; 
    left:0; 
    right:0; 
    padding-left:10px;  
    padding-right:20px; 
    padding-top:10px; 
    padding-bottom:20px; 
    background:rgba(255,255,255,0.9); 
    border:black, thin; 
    box-shadow: 5px 5px 5px grey; 
    z-index:1000000; 
    overflow: auto; 
    text-align:center; 
    height:800px; 
    } 

と左：0; right：0;要素はページ全体に広がります（つまり、width：auto;は無視されます）。がない場合、要素はページの左側に配置されます。

jsベースのコードに頼らなくても、両方を実行する方法はありますか？

Answer 1

あなたは

width: auto; 
height: auto; 
top: 50%; 
left: 50%; 
// don't declare right or bottom 
transform: translateX(-50%) translateY(-50%); 

次それは中央に要素の左端を置く試みることができる（左：50％;）それから、左に戻ってそれを微調整（移動X（-50％） ）。

垂直中心（上：50％;および（translateY（-50％））も同様です。