垂直居中的div可以增加父母身高 [英] Vertically centred div which increases parent height

问题描述

有一个动态内容的div。父母的身高是身体的100％，孩子是未知的。 translateY（-50％）技术只有在子内容高度小于父级时才有效。但如果更多的子div（绿色）开始溢出父母（黄色）如下图像。

设置父div的正确方法是增加高度并添加一些填充。

  .body {height：300px; background：red;}。parent {height：100％;位置：相对;背景：rgb（105，199，115）; } .child {position：absolute;顶部：50％;剩下：50％;变换：翻译（-50％，-50％）;背景：绿色;宽度：200px; }  

 < div class =body> < div class =parent> < div class =child>样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，< / div> < / div>< / div>  

解决方案

为什么选择职位？！


您可以将div设置为center：

我将这个设为中心，



 < style> 
 .body {
 height：300px; 
背景：红色; 
 display：table; 
宽度：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> 
样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，样本内容，
< / div> 
< / div> 
< / div> 
  




There is a div which has a dynamic content. The height of the parent is 100% of the body and child is unknown. translateY(-50%) technique works good only if a child content height is less than parent. But if it's more child div(green) starts to overflow the parent (yellow) as on below image. What's a proper way to set parent div increase the height and add some paddings.

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

解决方案

Why positions?!
You can center div With this:
I use this for center a div with dynamic height in it's parent:

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

这篇关于垂直居中的div可以增加父母身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！