顶部移动父元素
我有这样的代码：
<html>
<head>
....
</head>
<body>
<div class="custom">
...custom stuff here...
</div>
</body>
接下来我有一个这样的CSS：
.custom{
margin-left: 45%;
margin-top: 45%;
}
此代码应该将div始终移动到屏幕的中心。 剩下的边距工作得很好，并正确地居中div，但margin-top移动body元素 - div元素的父元素。 如果我将单位更改为％（px，em，rem）以外的单位，它可以正常工作......但是用％可以移动尸体。 我尝试了为父项添加少量的填充/边距，在父项内部添加溢出和其他属性，但它仍然在做同样的事情。 身体元素移动了45％，几乎是我屏幕的两倍，所以最终几乎不在屏幕底部。
如果保证金不应该接受％单位，为什么保证金保持正常工作？ 我不明白这种行为。 也div内的元素应该绝对不会做任何事情的父母，所以我现在很困惑..任何想法？
忘了添加一些body定义：
body{
width: 700px;
height: 400px;
margin : 5px 5px 5px 5px;
overflow: hidden;
backgrou....
}
说明
是的，这是一种正确的行为，因为百分比认为父母的位置。 就像在你的例子中那样，它将位于身体位置45％以下。
但在你的例子中，这不会工作，因为45％不是任何屏幕的中心，看到你的例子与一些边界看到的行为：
body {
border:1px solid red;
}
.custom{
margin-left: 45%;
margin-top: 45%;
border:1px solid blue;
}<div class="custom">
...custom stuff here...
</div>您使用的边距不正确。
让.content absolute放在任何你想要的地方。
看小提琴：https：//jsfiddle.net/4p18mxg9/6/
.custom{
position: absolute;
left: 45%;
top: 45%;
}
我明白为什么你不了解这种行为，这是一个常见问题和困境，不断向每个人展示。
在我们深入研究之前，请参考这篇伟大的文章。
所以，因为您试图仅使用边距来custom您的custom div，所以您基本上并不关注该页面。 考虑一下保证金对你有什么作用：清除一个元素周围的区域。 你可以很容易地发现你的保证金等于相邻边界中较大的一个; 这在处理垂直边界时很常见。
你可以用不同的方式解决这个问题，即你的方法是不正确的。
我建议查阅我链接的文章，并使用他们的解决方案水平居中对齐：
margin: 0 auto;
如果您希望如此，您可以在此添加垂直边距：
margin: 20vh auto 0 auto;
如果您需要更多帮助，请告知我
链接地址: http://www.djcxy.com/p/87777.html