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>

<强> Fiddle

因为填充在容器内部留出空间，并且边距给出了容器外部的空间。这是基本概念。

修改

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

Fiddle Link 包含margin-top，因为内部div从外部获取空间，它还会将外部div移动到下方，因为它是position:static。

而是将position:absolute作为 here ，它会将移动外部div移至下方。

这两张图片将解释更多。

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

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

Answer 2

第1部分：折叠边距。

外部div被内部div的边距设置推下来。那为什么呢？

这是一种普通的HTML呈现行为，称为collapsing margins。摘录自规范：

相邻的垂直边距崩溃[...]两个边距相邻 [...]盒子的上边距和第一个流入的孩子的上边距

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

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

我只是想知道为什么上面的inner_div无法集中在它的中心 parent div（outer-div）？

通过在中心使用{em> justify-content 和 justify-content 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或{{1 }}

hidden

<强> JSFiddle

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

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

<强> JSFiddle

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

3 个答案: