首页 文章

Css margin-top移动父元素

提问于
浏览 次
1

我有这样的代码：

<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....
}
html css margin

5 回答

  • 1

    解释

    是的，这是正确的行为，因为百分比考虑父母的位置 . 就像你的例子一样，它将位于身体位置的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，或者只是使用Maths定位，例如：

    解决方案 - 绝对元素

    如果您可以浮动元素，请使用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>
    回复于
  • 0

    您正在使用边距，不正确 .

    让 .content absolute 然后放在你想要的地方 .

    看小提琴：https://jsfiddle.net/4p18mxg9/6/

    .custom{
position: absolute;    
left: 45%;
top: 45%;
}
    回复于
  • 2

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

    在我们深入研究之前，请参考this great article .

    因此，因为您试图仅使用边距来使您的 custom div居中，所以您基本上不会以页面为中心 . 考虑一下保证金对您的影响：它清除元素周围的区域 . 您可以很容易地得到一个案例，即您的保证金等于相邻保证金中的较大者;这在使用垂直边距时很常见 .

    您可以通过不同方式解决此问题，即您的方法不正确 .

    我建议查阅我链接的文章，并使用他们的解决方案横向集中内容：

    margin: 0 auto;

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

    margin: 20vh auto 0 auto;

    如果您需要更多帮助，请与我们联系

    回复于
  • 3

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

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

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

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

    <html>

<head>
  ....
</head>

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

相关问题