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

【问题标题】：Middle align a div vertically in another div using percentage value使用百分比值在另一个 div 中垂直对齐 div
【发布时间】：2016-02-24 19:22:56
【问题描述】：

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

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

下图是我认为的html渲染结果，但实际结果完全不同——outer-div被inner-div的margin设置压低了。那为什么呢？

【问题讨论】：

不清楚的问题；你想在父 div 中创建一个潜水中心吗？
这里解释了为什么你会得到这样的结果stackoverflow.com/questions/12415661/…
@jiff 附图片澄清。
检查stackoverflow.com/questions/11003911/…
我可以在没有 margin 的情况下给你一个答案，实际上，如果你想用另一种方式来做这个，让我知道，如果你想要一个 div 中心，你不能从 margin 得到好的结果。

标签： html css

【解决方案1】：

第 1 部分。折叠边距。

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

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

相邻的垂直边距折叠 [...] 两个边距相邻 [...] 一个盒子的上边距和它的第一个流入子元素的上边距

稍微解释一下，当您有一个父级和它的第一个子级时，其中至少有一个具有上边距，现有边距中较大的一个将应用于父级。（除非在某些明确定义的情况下 - 阅读规范以了解它们是什么。）

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

我只是想知道为什么上面的 inner_div 不能居中父 div(outer-div)？

它实际上可以居中，通过使用 Flexbox 与 justify-content 和 justify-content 都居中。

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

还有其他技术也可以达到相同的效果（通过混合表格和内联显示模式），但我不建议在本世纪使用这些技术。

【讨论】：

“collapse margin”正是导致问题的原因。

【解决方案2】：

如果要将子 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

因为 padding 为容器内部提供空间，而 margin 为容器外部提供空间。这是基本概念。

编辑：

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

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

而是将position:absolute 设为here，它会将移动器外部 div 移动到下方。

这两张图会解释更多。

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

在上面这张图片中，没有边距显示外部 div。当我们指向外部 div 时。但是由于内部div，它只是移动了下面的div。

【讨论】：

是的，它奏效了。但是我真正想知道的是为什么margin不能使内部div居中，你能不能给我一些更深入的解释？
@gaols 正如我在回答边距中所述，在容器外留出了空间。所以，它会移动下面的 div，而不是在 div 内留出空间。阅读以下帖子将为您提供简要定义。 stackoverflow.com/questions/2189452/… 和 stackoverflow.com/questions/5958699/… 和 htmldog.com/guides/css/beginner/margins
看了一些，还是不是很清楚，所以我更新了我的问题，并附上一张图片来进一步表达我的问题。
@ketan 您的回答没有直接解决这个问题，是反事实的，而且难以阅读。请考虑改进它。
@AlinPurcaru 你不明白这并不意味着我的回答是错误的。为什么要投反对票？