Css margin-top 移动 parent 个元素

Question

我有这样的代码：

<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 的 parent 元素。如果我将单位更改为 % (px,em,rem) 以外的其他单位，它可以正常工作......但是使用 % 它会移动 body。我尝试了一些东西，比如向 parent 添加一点 padding/margin，在 parent 中添加溢出和其他属性，但它仍然在做同样的事情。 body 元素移动了 45%，几乎是我屏幕的两倍大小，所以最后几乎在屏幕底部。

如果边距不应接受 % 单位，为什么 margin-left 工作正常？我不明白这种行为。 div 中的元素也绝对不应该对 parent 做任何事情，所以我现在真的很困惑。有什么想法吗？

忘记添加一些 body 定义：

body{
   width: 700px;
   height: 400px;
   margin : 5px 5px 5px 5px;
   overflow: hidden;
   backgrou....
}

Answer 1

如果您指定宽度，它将位于屏幕中央

.custom {
    border: solid 1px red;
    margin: auto;
    width: 20em;
}

我也推荐这个网站Learn CSS Layout，这就是我一直想知道的。

Answer 2

我明白你为什么不理解这种行为，这是一个常见的问题，也是一个不断出现在每个人面前的困境。

在我们div进入之前，请参考this great article。

因此，因为您试图仅使用页边距使 custom div 居中，所以您基本上没有以页面为中心。想一想 margin 为您做了什么：它清除了元素周围的区域。您很容易遇到这样的情况，即您的保证金等于相邻保证金中的较大者；这在处理垂直边距时很常见。

您可以通过不同的方式解决这个问题，即您的方法不正确。

我建议查看我链接的文章并使用他们的解决方案来水平居中：

margin: 0 auto;

如果您愿意，可以在此处添加垂直边距：

margin: 20vh auto 0 auto;

如果您需要更多帮助，请告诉我

Answer 3

您使用的页边距不正确。

制作.content absolute然后放在任何你想要的地方。

参见fiddle：https://jsfiddle.net/4p18mxg9/6/

.custom{
position: absolute;    
left: 45%;
top: 45%;
}

Answer 4

.custom {
    border: solid 1px red;
    margin: 0 auto;
    display:table;
}

<html>

<head>
  ....
</head>

<body>
  <div class="custom">
    ...custom stuff here...
  </div>
</body>

Answer 5

说明

是的，这是正确的行为，因为百分比考虑了 parents 位置。就像在您的示例中一样，它将位于 body 位置下方 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 定义您的元素，因此定义顶部和左侧 50% 以及 return 和变换 -50%，请参阅此示例。

这很适合居中，它适用于任何大小的任何元素。

.custom{

  position: absolute;
  
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  border:1px solid blue;
  
}

<div class="custom">
      ...custom stuff here...
   </div>

Css margin-top 移动 parent 个元素

Css margin-top moves parent element

html

css

margin

说明

解决方案 - 绝对元素