在Body Body中居中多个嵌套DIV标记HTML CSS

Question

我有多个嵌套div's，它们遵循包含一些内容和页脚信息的文档流程。每个div都有id，名为content的{​​{1}}使用width css属性约束800px。

我遇到的问题是，当我展开网页时，div content及其所有嵌套div's仍然位于网页的左上角，{{1} } 30px。我希望margin content及其所有嵌套div位于div's div的中心。我认为我可以通过应用main样式css来实现这一目标。我附上了一张图片来试图说明我的意思。第一张图片展示了我网站的行为。

修改

这是我的代码。如果需要，我可以提供更多：

margin 0 auto;

Answer 1

此解决方案仅在#content小于#main时才有效，这基本上就是屏幕尺寸。

首先通过提供#main，html和body一个#main来确保height: 100%占据屏幕高度的100％。< / p>

要将#content置于#main的水平和垂直中心，它将绝对定​​位。要让#main作为参考框架，将position: relative添加到#main。 #content获得top: 50%和left: 50%，使#content的左上方恰好位于#main的中心。 #content得到一个transform: translate(-50%, -50%)，将其宽度的50％向左推，将其高度的50％推到顶部。这使它完全居中。

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}

#main {
  position: relative;
  height: 100%;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  border: 1px solid #c66;
  background-color: #f99;
  width: 300px;
  height: 300px;
}

＆＃13;

<div id="main">
  <div id="content"">
    <div class="box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

除非你给div一个宽度，否则margin: 0 auto;不会工作，因为如果你想一想，如果div没有宽度，浏览器将如何计算两边的距离？

你也可以将中间的div与text-align: center;对齐，但对于垂直居中有几种方式

• 您可以使用position: absolute;技巧或使用vertical-align: middle，但这需要display: inline-block;，否则无法使用。