Question

可能重复：
How to center DIV in DIV?

我想以<div>为中心（我是HTML5的新手，而<center>标签已不复存在），并且无论如何都要避免使用表格。这就是我到目前为止所讨论的<div>的CSS：

#roundedcorner {
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-image: url(file:///Macintosh%20HD/Users/julesmazur/Desktop/TAN3.0/Photos/bodydivbg.png);
    width: 960px;
    left: 50%;
    font-family: Ubuntu;
}

（对于任何好奇的人，Ubuntu由Google Web Fonts提供）。

Answer 1

典型的技巧是margin: auto。它会将它集中在它所处的位置。

demo

除此之外，我对你的代码有一些评论（因为你是初学者）。

left: 50%;不执行任何操作，例如position: relative;或position: absolute;
div所在的容器需要比它大 - 否则它居中并不意味着什么。这是因为像margin: auto这样的样式是相对于父容器的，即它需要空间。
对于Google网络字体，请确保您拥有@font-face。另外，使用替代品。并非所有浏览器都支持Web字体，并且您拥有的控制越多：越好。一个例子是font-family: Ubuntu, Arial, Sans;，从最喜欢的备份到最有可能的备份排序。

Answer 2

请勿使用left。这将在左侧的页面中创建一个瞎扯。相反，请使用margin: 0 auto。

<div style="margin:0 auto;width:960px">I'm centered.</div>

Answer 3

您可以使用以下方法居中（水平和垂直）DOM元素：

div {
    position    : absolute;
    width       : 960px;
    height      : 500px;
    left        : 50%;
    top         : 50%;
    margin-top  : -250px;
    margin-left : -480px;
}

以下是演示：http://jsfiddle.net/KBHjT/

Answer 4

<center><div></div></center>

试试

如何将<div>居中？</div>

4 个答案:

demo