垂直居中的 div 增加父级高度答案

【问题标题】：Vertically centred div which increases parent height垂直居中的 div 增加父级高度
【发布时间】：2016-02-24 11:44:04
【问题描述】：

有一个具有动态内容的 div。父母的身高是身体的100%，孩子是未知的。 translateY(-50%) 技术仅在子内容高度小于父项时才有效。但是，如果更多子 div（绿色）开始溢出父（黄色），如下图所示。设置父div的正确方法是增加高度并添加一些填充。

.body {
  height: 300px;
  background: red;
}
.parent {
  height: 100%;
  position: relative;
  background: rgb(105, 199, 115);
   
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
  width: 200px;
 }

<div class="body">
  <div class="parent">
    <div class="child">
      Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, 
    </div>
  </div>
</div>

【问题讨论】：

你能显示一些来源吗？
我已经更新了问题。还更新了我的父 div 的窗口大小为 100%，而不是 100vh。
您需要父级上的min-height 而不是height。但是，这不适用于绝对定位的孩子。嗯。必须思考。
默认情况下，父级会增加子级的大小，但在您的情况下，它有position:absolute，所以这不起作用Here 是一个示例，它如何仅使用边距居中。您必须在项目中使用绝对定位吗？在您的情况下，父 div 将始终限制为身体高度的 300 像素。

标签： html css transform center

【解决方案1】：

为什么是职位？！
你可以用这个来居中 div：
我将其用于在其父级中居中具有动态高度的 div：

<style>
    .body {
        height: 300px;
        background: red;
        display:table;
        width: 100%;
    }
    .parent {
        display:table-cell; 
        vertical-align: middle;
        background: rgb(105, 199, 115);

    }
    .child {

        background: green;
        width: 200px;
        margin: auto;
    }
</style>
<div class="body">
    <div class="parent">
        <div class="child">
            Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, 
        </div>
    </div>
</div>

【讨论】：