我知道如何使用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>-->

最佳答案

使父对象divdisplay: flexjustify-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/

10-12 12:38
查看更多