我知道如何使用position:absolute将div垂直居中;但如何使子div调用内部容器在包含滚动条的父div调用消息框中垂直居中红色将其截断,也就是内部容器如何解决此问题?
body{
color: white;
}
#message-box{
margin-top: 5px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
min-height: 150px;
max-height: 250px;
width: 350px;
background-color: black;
overflow: auto;
}
#internal-container{
background-color: red;
height: 80%;
width: 80%;
word-break: break-all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id='message-box'>
<div id='internal-container'>
<p>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</p>
</div><!--</internal-container>-->
</div><!--</message-box>-->
最佳答案
使父对象div
display: flex
和justify-content: center;
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 300vh;
background: #338cb0;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 80%;
height: 120px;
background: #770022;
}
<div class="parent">
<div class="child"></div>
</div>
关于html - 如何在包含滚动条的父div中垂直居中子div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51958455/