居中一個div，並使其在固定的容器內滾動

Question

我正在實施只有CSS的模態。所以最後我在裏面有一個固定位置的容器和一個div。我想要完成的是div始終居中放在固定容器中，並且如果div的整個內容不可見（如果您調整瀏覽器大小），將滾動滾動條。這裏是我的代碼：

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：

.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內div的DIV，你必須添加一個text-align: center;。要在你的div中有一個滾動條，我想你的container div再次，你必須添加一個高度到你的div。然後，您可以使用overflow: scroll;添加滾動條。

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