Bir div merkezi ve sabit bir kapsayıcı içinde kaydırılabilir hale getir

Question

Yalnızca css ile bir model uygularım. Böylece sonunda sabit bir pozisyon konteynerine ve içindeki bir div'a sahibim. Tamamlamak istediğim, her zaman sabit konteynerin içinde ortalanacak ve divun tüm içeriği görünmüyorsa (tarayıcıyı yeniden boyutlandırırsanız) kaydırma olması. İşte benim kodudur:

html:

<div> 
<a href="#openModal">open</a> 
    <div id="openModal" class="modalDialog"> 
    <div class="container"> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 
    <div>test</div> 

    </div> 
    </div> 
</div> 

css: Bir text-align: center; eklemek zorunda div

.modalDialog { 
    position: fixed; 
    top:0; 
    left:0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity: 0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
    overflow: hidden; 
} 

.modalDialog:target { 
    opacity: 1; 
    pointer-events: auto; 
} 

.container { 
     position: relative; 
     padding: 5px 20px 13px 20px; 
     background: #fff; 
     margin: 10% auto; 
     overflow-y: scroll; 

    } 

Answer 1

container içindeki div merkezine giden. Divanda bir kaydırma çubuğu olması için, container div'unuzu tekrar tahmin ediyorum, divunuza bir yükseklik eklemeniz gerekiyor. Ardından kaydırma çubuğunu eklemek için overflow: scroll; kullanabilirsiniz.

.container { 
     position: relative; 
     padding: 5px 20px 13px 20px; 
     background: #fff; 
     margin: 10% auto; 
     overflow: scroll; 
     text-align: center; 
     height: 350px; 
    }