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

あなたがtext-align: center;を追加する必要がcontainer divの内側のdivのをセンターに。 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; 
    }