自动边距在css的顶部和底部不起作用[重复]答案

【问题标题】：auto margin is not working in top and bottom in css [duplicate]自动边距在css的顶部和底部不起作用[重复]
【发布时间】：2020-10-08 04:21:29
【问题描述】：

自动边距在顶部和底部不起作用..... 我的目标是让身体漂浮在中间，顶部和底部的边距相等...... 我的预期结果是顶部和底部边距的高度相同............ 但结果是身体移到了顶部

html {
    width: 100vw;
    height: 100vh;
    background-color: red;
    margin: 0px;
    padding: 0px;
}
body {
  background-color: chartreuse;
  width: 90%;
  height: 90%;
  padding: 0px;
  margin: auto;
  border-color: black;
  border-width: 10px;
  border-style: solid;
}

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Document</title>
</head>
<body>
</body>
</html>

screenshot of page

【问题讨论】：

您应该在body 中使用div，而不是尝试浮动整个body。此外，要使margin: auto 正常工作，您需要将“浮动”元素设置为display: block

标签： html css

【解决方案1】：

如果margin-top 和margin-bottom 都是auto，则用于它们的值都为零。这就是盒子没有垂直居中的原因。

您可以使用 flexbox 在您希望水平和垂直居中的元素的父元素上使用以下属性将框水平和垂直居中。

display: flex;
align-items: center;
justify-content: center;

示例：

body {
  margin: 0;
}

div {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.centered {
  background: blue;
  width: 100px;
  height: 100px;
}

<div>
  <div class="centered"></div>
</div>

【讨论】：

也对此表示赞同。 @Yousaf

【解决方案2】：

显然，这段代码为我完成了这项工作。

html {
  width: 100vw;
  height: 100vh;
  background-color: red;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: chartreuse;
  width: 90%;
  height: 90%;
  padding: 0px;
  margin: 40px 40px;
  border-color: black;
  border-width: 10px;
  border-style: solid;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Document</title>
</head>

<body>
</body>

</html>

【讨论】：

【解决方案3】：

不要使用padding: 0px，而是使用padding-top: 5px 和padding-bottom:5px。如果你的底页和顶页的范围，它们将有相同的空格。

【讨论】：

5px 顶部和底部不会使这个浮动在屏幕中间。

【解决方案4】：

没有margin:auto这样的东西来表示顶部和底部的等间距。您通常可以结合使用 display: table on parent 和 display:table-cell;如果您不想使用 flex，请使用 vertical-align:middle 在孩子身上。

但是，在您尝试在身体上执行此操作的情况下，它不起作用。因此，鉴于您选择了 90% 的高度，您可以将顶部和底部边距设置为 5%。

    <!DOCTYPE html>
    <html lang="en">

      <head>
        <style>
          html {
            width: 100vw;
            height: 100vh;
            background-color: red;
            margin: 0px;
            padding: 0px;
          }

          body {
            background-color: chartreuse;
            width: 90%;
            height: 90%;
            padding: 0px;
            margin: 5% auto;
            border-color: black;
            border-width: 10px;
            vertical-align: middle;
            border-style: solid;
          }

        </style>
        <title>Document</title>
      </head>

      <body>
      </body>

    </html>

【讨论】：

是的，这种方法很有效。支持你的答案@unbrand-manchester
您的方法使页面高度大于 100%。支持你的答案@unbrand-machester

【解决方案5】：

就像评论中所说的，你必须使用 div 而不是 body。正文不会根据高度和宽度或边距浮动。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html {
                width: 100vw;
                height: 100vh;
                background-color: red;
                margin: 0px;
                padding: 0px;
            }
            .container {
                background-color: chartreuse;
                width: 90%;
                height:90%;
                padding: 0px;
                margin: auto;
                border-color: black;
                border-width: 10px;
                border-style: solid;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
    <div class="container"></div>
    </body>
    </html>

【讨论】：

没有 div 的情况下工作 - 请参阅我的和 @Yousaf 的答案
指定高度值，如90%查看结果@aviboy2006