将多个嵌套DIV居中标记为HTML CSS

Question

I have multiple nested div's that follow the flow of the document that contain some content and footer information. 我有多个嵌套的div's ，它们跟随包含某些内容和页脚信息的文档流。 Each div has an id and the one named content is constrained using the width css property to about 800px . 每个div都有一个id并且使用width css属性将一个命名的content限制为约800px 。

The problem I have is that when I expand the webpage, the div content with all its nested div's remains at the top left corner of the webpage with the 30px margin . 我的问题是，当我扩展网页时，带有所有嵌套div's div content div's保留在网页的左上角，其margin为30px 。 I want the content div and all its nested div's to be in the centre of the div main . 我希望content div及其所有嵌套的div's位于div main的中心。 I thought I could achieve this by applying the css style margin 0 auto; 我以为可以通过应用css style margin 0 auto;来实现这一点margin 0 auto; . 。 I have attached an image to try and illustrate what I mean. 我附上一张图片，试图说明我的意思。 The first image demonstrates the behaviour of my website as it stands. 第一张图片展示了我网站的现状。

DIV的

EDIT: 编辑：

Here is my code. 这是我的代码。 I can provide more if needed: 如果需要，我可以提供更多：

  <!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>

Answer 1

This solution will only work if the #content is smaller than the #main , which is basically the screen size. 仅当#content小于#main （基本上是屏幕尺寸）时，此解决方案才有效。

First make sure that #main takes up 100% of the height of the screen by giving the html , body and #main a height: 100% . 首先，通过为html ， body和#main设置height: 100% ，确保#main占据屏幕height: 100% 。

To position the #content in the horizontal and vertical center of the #main it will be positioned absolutely. 以定位#content在的水平和垂直中心#main它将被绝对定位。 To let it have #main as it's frame of reference add position: relative to the #main . 为了使其具有#main作为参考框架，请添加position: relative对于#main position: relative The #content gets a top: 50% and left: 50% which makes the top left of the #content start at exactly the center of the #main . #content的top: 50% ， left: 50% ，这使得#content左上角恰好在#main的中心开始。 The #content gets a transform: translate(-50%, -50%) to nudge it 50% of its width to the left and 50% of its height to the top. #content得到了transform: translate(-50%, -50%)将其宽度的50％移至左侧，将其高度的50％移至顶部。 This makes it perfectly centered. 这使其完全居中。

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

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

Answer 2

the margin: 0 auto; margin: 0 auto; wont work unless u give the div a width because if u think about it ,how the browser will calculate the distance from both sides if the div doesn't have a width ?, 除非您给div一个宽度，否则它将无法工作，因为如果您考虑它，如果div没有宽度，浏览器将如何计算双方的距离？

u can also align a div in middle with text-align: center; 您还可以将div的中间text-align: center;到text-align: center; , but for the vertical centering there a couple of ways ，但是对于垂直居中有几种方法

u can use the position: absolute; 您可以使用以下position: absolute; trick or use the vertical-align: middle but this needs a display: inline-block; 欺骗或使用vertical-align: middle但这需要display: inline-block; or it wont work. 否则它将无法正常工作。

将多个嵌套DIV居中标记为HTML CSS

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-12-22 14:50:08

解决方案2
0 2014-12-22 14:48:52

将多个嵌套DIV居中标记为HTML CSS

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-12-22 14:50:08

解决方案2 0 2014-12-22 14:48:52

解决方案1
1 已采纳 2014-12-22 14:50:08

解决方案2
0 2014-12-22 14:48:52