如何使 <div> 居中？ [复制]

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

---

此外，我在您的代码中有一些 cmets（因为您是初学者）。

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

Answer 2

不要使用left。这将在左侧的页面中创建一个 gab。请改用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>

试试看