使div居中并使其在固定容器内可滚动
提问于 2016-04-01 10:26:20
我正在实现一个只有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;
}
回答 1
Stack Overflow用户
发布于 2016-04-02 10:49:52
要使div在container 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36353941
复制相关文章
![[译]在Solidity中创建无限制列表](https://ask.qcloudimg.com/http-save/yehe-2036920/2kj7wznpp3.jpeg)
腾讯云开发者
