如何在居中的div上启用滚动？高度是动态的，所以我不能真正声明它。
代码在下面，在某些情况下可能不需要滚动，因为内容不足以要求它。
div必须同时垂直居中（当其高度小于视口高度时）和水平居中。
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
padding: 0 25px;
}
.modal-container {
max-width: 600px;
margin: auto auto;
padding: 15px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
}<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
</div>
</div>我的另一个解决方案是：
.modal-mask {
position: relative;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal-wrapper {
position: absolute;
top: 0;
bottom: 0;
right:0;
left:0;
margin: auto;
padding: 0 25px;
}
.modal-container {
max-width: 600px;
margin: auto auto;
padding: 15px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
}<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
This needs scroll<br>
</div>
</div>问题是当高度低于视口时容器不会垂直居中
只需添加以下代码。希望对您有帮助
.modal-container {overflow-y: auto; max-height: 100vh;}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句