垂直居中的div元素，会增加父元素的高度。

6 浏览
0 Comments

垂直居中的div元素，会增加父元素的高度。

有一个div元素，它具有动态内容。父元素的高度为body的100%，子元素的高度未知。如果子元素的内容高度小于父元素，translateY(-50%)技术可以很好地工作。但是，如果子div（绿色）的高度超过父元素（黄色），则会溢出，如下图所示。

怎样正确设置父div的高度并添加一些padding呢？

以下是CSS代码：

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

}

以下是HTML代码：

示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容，示例内容。

0

1 答案

0 Comments

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垂直居中在其父元素中，但是使用普通的CSS属性无法实现该效果。

解决方法是使用display: table和display: table-cell属性来实现垂直居中。首先，将父元素的display属性设置为table，使其表现为一个表格；然后，将子元素的display属性设置为table-cell，并使用vertical-align属性将其垂直居中。这样可以实现动态高度的div垂直居中，并且不会影响父元素的高度。

代码如下：




    

        

            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，父元素的高度为300px，背景为红色，子元素的背景为绿色，宽度为200px，并且内容为"Sample content"的重复。通过设置父元素的display属性为table，子元素的display属性为table-cell，并使用vertical-align属性将其垂直居中，实现了动态高度的div垂直居中的效果。

0