Css margin-top移动父元素

时间:2015-10-30 17:42:17

标签: html css margin

我有这样的代码:

<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....
}

5 个答案:

答案 0 :(得分:3)

解释

是的,这是正确的行为,因为百分比考虑父母的位置。就像你的例子一样,它将位于身体位置的45%以下。

但是在你的例子中,这不会起作用,因为45%不是任何屏幕的中心,请看一些带边框的示例来查看行为:

&#13;
&#13;
body {
  border:1px solid red;
}

.custom{

  margin-left: 45%;
  margin-top: 45%;
  
  border:1px solid blue;
  
}
&#13;
<div class="custom">
      ...custom stuff here...
   </div>
&#13;
&#13;
&#13;

有不同的方法可以使用display:flex,或者只使用数学定位,例如:

解决方案 - 绝对元素

如果您可以浮动元素,请使用position:absolute定义元素,因此将top和left定义为50%并使用transform -50%返回,请参阅此示例。

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

&#13;
&#13;
.custom{

  position: absolute;
  
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  border:1px solid blue;
  
}
&#13;
<div class="custom">
      ...custom stuff here...
   </div>
&#13;
&#13;
&#13;

答案 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>