在主体标记HTML CSS中居中放置多个嵌套div_Html_Css

在主体标记HTML CSS中居中放置多个嵌套div

html css

在主体标记HTML CSS中居中放置多个嵌套div,html,css,Html,Css,我有多个嵌套的div，它们遵循文档的流程，包含一些内容和页脚信息。每个div都有一个id，名为content的div使用widthcss属性约束为大约800px 我遇到的问题是，当我展开网页时，div内容及其所有嵌套的div仍保留在网页的左上角，页边距为30px边距。我希望内容div及其所有嵌套的div位于div主的中心。我想我可以通过应用cssstylemargin0 auto来实现这一点。我附上了一张图片，试图说明我的意思。第一张图片展示了我的网站的现状编辑：这是我的密码。如果需要，我

我有多个嵌套的

div

，它们遵循文档的流程，包含一些内容和页脚信息。每个

div

都有一个

id

，名为

content

的div使用

width

css

属性约束为大约

800px

我遇到的问题是，当我展开网页时，

div

内容

及其所有嵌套的

div

仍保留在网页的左上角，页边距为

30px

边距
。我希望内容
div
及其所有嵌套的div
位于div
主

的中心。我想我可以通过应用

css

style

margin0 auto来实现这一点。我附上了一张图片，试图说明我的意思。第一张图片展示了我的网站的现状

编辑：
这是我的密码。如果需要，我可以提供更多：
  <!doctype html>
<html>
    <head>
        <style type="text/css">

            body {
                margin: 30px;
            }
            #main {
                margin: 0 auto;
            }

        </style>
    </head>
    <body>

        <div id="main">

            <div id="main_index">

                <div id="content"></div>
                <div id="footer"></div>

            </div>

        </div>

    </body>
</html>


身体{
利润率：30像素；
}
#主要{
保证金：0自动；
}
边际：0自动不会工作，因为如果你仔细想想，如果div没有宽度，浏览器将如何计算从两侧的距离
u还可以将中间的div与文本对齐：居中对齐，但对于垂直居中，有两种方法

u可以使用位置：绝对技巧或使用垂直对齐：中间
但这需要显示：内联块否则它将无法工作

只有当#content
小于#main
时，此解决方案才有效，后者基本上是屏幕大小
首先确保#main
占据100%的屏幕高度，方法是给出html
、主体
和#main
a高度：100%

要将#内容
定位在#主
的水平和垂直中心，它将绝对定位。要使其具有#main
作为参考框架，请将位置：相对添加到#main
。#内容
得到一个顶部：50%
和左侧：50%
，这使得#内容
的左上方正好从#主
的中心开始。#content
获得一个变换：translate（-50%，，-50%）
将其宽度的50%推到左侧，高度的50%推到顶部。这使它完全居中

html，
身体{
身高：100%；
}
#主要{
位置：相对位置；
身高：100%；
}
#内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.盒子{
边框：1px实心#c66；
背景色：#f99；
宽度：300px；
高度：300px；
}

位置：绝对位置；排名：0；右：0；左：0；底部：0；保证金：自动把它放在#main
上。这将需要一个定义的高度。谢谢，这正是我想要它的表现。我很抱歉看到我的div结构与上面的代码有点不同。给我几分钟，我会编辑我的原始代码。我还将编辑我的图像以匹配所涉及的div。只需将代码中的#内容
替换为#主索引
，它就可以工作了。之后，你可以用你喜欢的任何东西填充现在称为#main_index
，因此在你的情况下，你的#content
和#footer
谢谢-我已经将代码添加到我的css中，main#index div实际上被切成了一半，因为我的大部分内容也从顶部消失了，我使用的是sublime text 3，它似乎无法识别transform:translate（-50%，-50%）；。这意味着它不会像所有其他css属性一样自动填充。很抱歉，它不起作用。也许试着用更多的代码来更新问题，显示出哪里出了问题，或者添加一个新的问题？没问题-tbh，我很好地使用了你的代码，出于某种原因，我所需要做的就是去掉main
div，只需将margin 0 auto
应用到main\u index
div。我已经在Chrome上测试过它，Firefox和Safari（均为Mac）及其行为与您的示例相同。在这种情况下，我会将您的答案标记为正确，因为您提供了一些有用的代码：-）