我有这样的代码：
<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{
width: 700px;
height: 400px;
margin : 5px 5px 5px 5px;
overflow: hidden;
backgrou....
}
答案 0 :(得分：3)
是的，这是正确的行为，因为百分比考虑父母的位置。就像你的例子一样，它将位于身体位置的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>
有不同的方法可以使用display：flex，或者只使用数学定位，例如：
如果您可以浮动元素，请使用position：absolute定义元素，因此将top和left定义为50％并使用transform -50％返回，请参阅此示例。
这很适合居中，它适用于任何大小的任何元素。
.custom{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border:1px solid blue;
}<div class="custom">
...custom stuff here...
</div>
答案 1 :(得分：2)
您正在使用边距，不正确。
将.content absolute设置在您想要的位置。
请参阅小提琴：https://jsfiddle.net/4p18mxg9/6/
.custom{
position: absolute;
left: 45%;
top: 45%;
}
答案 2 :(得分：1)
我明白为什么你不理解这种行为，这是一个常见的问题和一个不断出现在每个人面前的困境。
在我们深入研究之前，请参考this great article。
所以，因为你试图仅使用边距来集中你的custom div，所以你基本上不会以页面为中心。考虑一下保证金对您的影响：它清除元素周围的区域。您可以很容易地得到一个案例，即您的保证金等于相邻保证金中的较大者;这在使用垂直边距时很常见。
您可以通过不同方式解决此问题，即您的方法不正确。
我建议查阅我链接的文章，并使用他们的解决方案横向对中：
margin: 0 auto;
如果您愿意，可以在这里添加垂直边距：
margin: 20vh auto 0 auto;
如果您需要更多帮助，请告诉我
答案 3 :(得分：0)
如果指定宽度，则它将位于屏幕中央
.custom {
border: solid 1px red;
margin: auto;
width: 20em;
}
我也推荐这个网络Learn CSS Layout，这是我一直想知道的。
答案 4 :(得分：0)
.custom {
border: solid 1px red;
margin: 0 auto;
display:table;
}
<html>
<head>
....
</head>
<body>
<div class="custom">
...custom stuff here...
</div>
</body>