Question

可能重复：
How to center a div in a div?

我有一个大DIV，宽度和高度都是100％所以它占用了整个浏览器。我内部还有另一个DIV，宽度为1024px，高度为400px。我想知道什么是水平和垂直居中div的最佳方法是什么？我还希望它在浏览器调整大小时保持在中心位置。有没有jQuery插件，一些方便的javascript或我可以简单地使用CSS。

标记

.bigdiv{
height:100%;
width:100%;
background-color:#eee;
}
.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
}

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

感谢您提供任何帮助和建议！

Answer 1

尝试使用margin:0 auto;

.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
margin:0 auto;
}

Answer 2

您可以轻松地将margin:auto;提供给您的孩子div以获得所需的结果

<强> HTML

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

<强> CSS

 .bigdiv{
    height:100%;
    width:100%;
    background-color:#eee;
    }
    .smalldiv{
    height:400px;
    width:1024px;
    background-color:#ccc;
    margin:auto;
    }

DEMO

Answer 3

好的，这就是如何让它居中。

.bigdiv{
height:100%;
width:100%;
background-color:#eee;
position:relative;
}
.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
position:absolute;
left:50%;
top:50%;
margin-left:512px;
margin-top:200px;
}

<div class="bigdiv">
<div class="smalldiv"></div>
</div>

Answer 4

在较大的div中使用text-align:center 和margin:0 auto 在你内心的div

以div为中心

4 个答案: