中间使用百分比值将div在另一个div中垂直对齐
监狱
<!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渲染的结果，但实际上结果是完全不同的-外层div被内层div的边距设置压低了。所以为什么？
阿林·普卡鲁（Alin Purcaru）
第1部分。崩溃的边缘。
外部div被内部div的边距设置下推。所以为什么？
这是正常的HTML呈现行为，称为折叠边距。规范摘录：
相邻的垂直边距折叠，两个边距紧接一个框的顶部边距和其第一个流入子元素的顶部边距
稍微说明一下，当您有一个父母及其第一个孩子时，其中至少有一个具有最高边距，则现有的边距中的较大者将应用于父母。（除非在某些定义明确的情况下，否则请阅读规范以了解它们是什么。）
第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>还有其他一些技术也可以达到相同的结果（通过混合表和内联显示模式），但是我不建议在本世纪使用这些技术。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
当高度为百分比时，将div放在另一个div的中间
- 2
将div中的文本与高度和宽度百分比垂直对齐？
- 3
如何在具有百分比高度的div中间垂直对齐文本？
- 4
计算mysql表中的值的百分比，并将百分比值写入另一个表中
- 5
将一个div与另一个div垂直对齐
- 6
<div>在另一个<div>相同百分比但内部重叠的地方？
- 7
在另一个流体div中垂直对齐流体div
- 8
如何在另一个div中垂直对齐div？
- 9
垂直对齐包含在另一个 <div> 中的 <div> 的内容
- 10
设置一个div来填充宽度为百分比的另一个div
- 11
将子div垂直对齐到父div的底部，然后将子div设置为父高度的百分比
- 12
将子div垂直对齐到父div的底部，并将子div设置为父高度的百分比
- 13
并排Div，以一个固定的尺寸和另一宽度作为百分比
- 14
通过计算列上的百分比来将记录插入到另一个表中的查询
- 15
可伸缩行，每行5个div，一个带有固定宽度，另一个四个带百分比
- 16
文本和另一个内的div的垂直对齐
- 17
另一个div中间对齐的div
- 18
CSS问题，垂直对齐的百分比余量
- 19
另一个垂直div中间的div位置
- 20
根据另一个 CTE 百分比从列表中提取最高百分比的 ID
- 21
如何将此div固定到另一个div中？这是一个导航栏，它不会垂直对齐
- 22
如何在 tinyscrollbar 中给 div 元素一个百分比高度？
- 23
垂直对齐div中的最后一个元素
- 24
一个列出另一个的百分比
- 25
当使用百分比时，找到一个随机整数，该随机整数将创建另一个整数
- 26
div对齐-宽度百分比
- 27
div对齐-宽度百分比
- 28
如何在另一个固定高度div内垂直对齐动态高度div
- 29
我在另一个具有特定宽度的div内有一个div，但我希望子div的宽度与浏览器屏幕尺寸成百分比，而不是其父div？
我来说两句