-3

可能重复：
如何在 div 中居中 div？

我有一个大的 DIV，它的宽度和高度为 100%，所以它占据了整个浏览器。我里面还有另一个 DIV，宽度为 1024 像素，高度为 400 像素。我想知道将 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>

感谢您的任何帮助和建议！

4

4 回答 4

0

您可以轻松地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;
    }

演示

于 2012-11-09T05:59:34.893 回答
0

尝试使用，margin:0 auto;

.smalldiv{
height:400px;
width:1024px;
background-color:#ccc;
margin:0 auto;
}
于 2012-11-09T05:58:16.510 回答
0

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

.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>
于 2012-11-09T06:20:44.663 回答
-1

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

于 2012-11-09T05:56:37.147 回答