中间使用百分比值在另一个div中垂直对齐div

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tested html</title>
    <meta charset="utf-8">
</head>
<body>
<div id="outer-div" style="height:20em;background-color:red;">
    <div id="inner_div" style="height:50%;margin-top:25%;margin-bottom:25%;">This the inner-div to be centered inside outer-div</div>
</div>
</body>
</html>

已经有很多解决方案在另一个内部（仅垂直）居中，但我只是想知道为什么上面的inner_div不能在其父div（outer-div）中居中？

下面的图片是我认为的html渲染结果，但实际上结果完全不同 - 外部div被内部div的边距设置压低了。 所以为什么？

Answer 1

如果要在父div中移动子div，请使用padding-top和padding-bottom而不是margin 。

<div id="outer-div" style="height:20em;background-color:red;">
    <div id="inner_div" style="height:50%;padding-top:25%;padding-bottom:25%;">This the inner-div to be centered inside outer-div</div>
</div>

小提琴

因为填充在容器内部留出空间，并且边缘在容器外部提供空间。 这是基本概念。

编辑：

为了澄清你的困惑我添加了background-color:yellow到内部div。

小提琴链接包含margin-top作为内部div从外部占用空间它也将外部div移动到下面，因为它是position:static 。

相反给position:absolute是这里将发外层div移动到下方。

这两个图像将解释更多。

在上面的图像中，您可以检查内部div是否占用保证金。 检查指针，黄色是检查元素可以看到的边距。

在上图中，没有边距显示外部div。 当我们指出外部div。 但它只是因为内部div而移动下面的div。

Answer 2

第1部分：折叠边距。

外部div被内部div的边缘设置推下来。 所以为什么？

这是一种普通的HTML呈现行为，称为折叠边距 。 摘自规范：

相邻的垂直边距坍塌[...]两个边距位于一个方框的上边缘和第一个流入的儿童的上边缘

为了解释一下，如果您有父母及其第一个孩子，并且其中至少有一个孩子具有上边距，则现有边距中的较大者将应用于父母。 （除了在一些定义明确的情况下 - 阅读规格以了解它们是什么。）

第2部分。没有额外元素的居中。

我只是想知道为什么上面的inner_div不能在其父div（outer-div）中居中？

它实际上可以通过使用具有对齐内容的 Flexbox和在中心处的对齐内容来集中。

 .parent { width: 300px; height: 200px; background-color: Green; display: flex; justify-content: center; align-items: center; } .child { width: 200px; height: 100px; background-color: Red; }

 <div class="parent"> <div class="child"></div> </div>

还有其他技术可以实现相同的结果（通过混合表和内联显示模式），但我不建议使用本世纪的那些。

Answer 3

所有你需要的是overflow: auto为父div ，实际上当你为一个孩子设置margin-top它也自动推父，你必须设置overflow: auto或hidden 。

#outer-div {
    background: red;
    width: 100%;
    height: 50%;
    overflow: auto;
}

的jsfiddle

正如我在评论中告诉你的那样，我可以向你推荐一个更好的方法来建立一个div中心。

#inner_div {
    width: 100%;
    height: 25%;
    background: blue;
    color: white;
    top: 50%;
    position: relative;
    transform: translate(0, -50%);
}

的jsfiddle

中间使用百分比值在另一个div中垂直对齐div

问题描述

3 个解决方案

解决方案1
0 2016-02-24 08:42:28

解决方案2
0 已采纳 2016-02-24 10:44:06

解决方案3
-1 2016-02-24 11:22:56

中间使用百分比值在另一个div中垂直对齐div

问题描述

3 个解决方案

解决方案1 0 2016-02-24 08:42:28

解决方案2 0 已采纳 2016-02-24 10:44:06

解决方案3 -1 2016-02-24 11:22:56

解决方案1
0 2016-02-24 08:42:28

解决方案2
0 已采纳 2016-02-24 10:44:06

解决方案3
-1 2016-02-24 11:22:56