如何在包含滚动条的父 div 中垂直居中子 div？答案

【问题标题】：How to center a child div vertically in a parent div that contains a scroll bar?如何在包含滚动条的父 div 中垂直居中子 div？
【发布时间】：2018-08-22 17:45:25
【问题描述】：

我知道如何使用 position: absolute; 在网页上单独垂直居中 div但是如何让子 div 调用 internal-container 在包含滚动条的父 div 调用消息框中垂直居中，红色切断 AKA 内部容器我该如何解决这个问题？

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>-->

【问题讨论】：

查找 CSS dead-center 以获得 CSS 2 兼容性，尽管您可能也有兴趣 my 在这里回答我自己的问题：stackoverflow.com/questions/25832340/…
还可以转到我的个人资料中的链接，然后在网站右上角单击“网站主题”之类的内容，然后查看“开发人员工具检查器”选项卡中使用的 CSS 代码。
在这种情况下你的中心是什么？

标签： html css

【解决方案1】：

使父 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>

【讨论】：