中间使用百分比值在另一个div中垂直对齐div
[英]Middle align a div vertically in another div using percentage value
问题描述
<!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>
There are already many solutions to center(vertically only) a div inside another one, but i just wonder why the inner_div above cannot get centered in its parent div(outer-div)? 
已经有很多解决方案在另一个内部（仅垂直）居中，但我只是想知道为什么上面的inner_div不能在其父div（outer-div）中居中？
The picture below is the html rendering result from my opinion, but actually result is completely different -- the outer-div get pushed down by inner-div's margin settings. 下面的图片是我认为的html渲染结果，但实际上结果完全不同 - 外部div被内部div的边距设置压低了。 so why? 所以为什么？
3 个解决方案
解决方案1
0 2016-02-24 08:42:28
Use padding-top and padding-bottom instead of margin if you want to move you child div inside parent div. 如果要在父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>
Because padding gives space inside the container and margin gives the space outside the container. 因为填充在容器内部留出空间，并且边缘在容器外部提供空间。 This is the basic concept. 这是基本概念。
Edit: 编辑：
To clarify your confusion i have added background-color:yellow to inner div. 为了澄清你的困惑我添加了background-color:yellow到内部div。
Fiddle Link contains margin-top as inner div take space from outside it will also move the outer div to below as it is position:static . 小提琴链接包含margin-top作为内部div从外部占用空间它也将外部div移动到下面，因为它是position:static 。
Instead give position:absolute as here it will move mover outer div to below. 相反给position:absolute是这里将发外层div移动到下方。
This two image will explain more. 这两个图像将解释更多。
In above image you can check that inner div taking the margin. 在上面的图像中，您可以检查内部div是否占用保证金。 Check the pointer and yellow color is margin you can see from inspecting element. 检查指针，黄色是检查元素可以看到的边距。
And in above this image there is no margin show the outer div. 在上图中，没有边距显示外部div。 As we point the outer div. 当我们指出外部div。 But it just move the div below because of inner div. 但它只是因为内部div而移动下面的div。
解决方案2
0 已采纳 2016-02-24 10:44:06
Part 1. Collapsing Margins. 第1部分：折叠边距。
the outer-div get pushed down by inner-div's margin settings.
This is a normal HTML rendering behavior and it is called collapsing margins . 这是一种普通的HTML呈现行为，称为折叠边距 。 Excerpts from the specification: 摘自规范：
Adjoining vertical margins collapse [...] Two margins are adjoining [...] top margin of a box and top margin of its first in-flow child
To explain it a bit, when you have a parent and its first child, with at least one of them having a top margin, the larger of the existing margins will be applied to the parent. 为了解释一下，如果您有父母及其第一个孩子，并且其中至少有一个孩子具有上边距，则现有边距中的较大者将应用于父母。 (Except in some well defined situations - read the specs to see which they are.) （除了在一些定义明确的情况下 - 阅读规格以了解它们是什么。）
Part 2. Centering without extra elements. 第2部分。没有额外元素的居中。
i just wonder why the inner_div above cannot get centered in its parent div(outer-div)?
It actually can get centered, by using Flexbox with justify-content and justify-content both on center. 它实际上可以通过使用具有对齐内容的 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>
There are other techniques as well that can achieve the same result (by mixing table and inline display modes), but I wouldn't recommend using those in this century. 还有其他技术可以实现相同的结果（通过混合表和内联显示模式），但我不建议使用本世纪的那些。
解决方案3
-1 2016-02-24 11:22:56
All you need is overflow: auto for parent div , actually when you set margin-top for a child it automatically push parent too, you must set overflow: auto or hidden . 所有你需要的是overflow: auto为父div ，实际上当你为一个孩子设置margin-top它也自动推父，你必须设置overflow: auto或hidden 。
#outer-div {
background: red;
width: 100%;
height: 50%;
overflow: auto;
}
As i told you in comment, I can recommend you a better way to make a div center. 正如我在评论中告诉你的那样，我可以向你推荐一个更好的方法来建立一个div中心。
#inner_div {
width: 100%;
height: 25%;
background: blue;
color: white;
top: 50%;
position: relative;
transform: translate(0, -50%);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.