Question

我有<div>，其风格如下：

.content{
    width: 70%;
}

为了使div居中，可以将边距设置为auto（margin: 0 auto;），但这只有在我有固定大小（例如400px）时才有效。那么我如何以相对宽度居中我的div？

Answer 1

margin: 0 auto也适用于百分比div。边距将根据宽度的百分比计算。

http://jsfiddle.net/B32mh/

Answer 2

使用

<body>
  <div class="content">
    <div class="centered"><h1>Hello</h1></div>
  </div>
</body>

和CSS

.content {
  width: 70%;
  background-color: #e5e5e5;
}

.centered {
  width: 150px;
  background-color: #ccc;
  margin: 0 auto;
}

你明白了：

enter image description here

JsBin演示：http://jsbin.com/iDAZeSi/1/

从答案编辑

只需将margin: 0 auto;添加到.content，就好像是

.content {
  width: 70%;
  background-color: #e5e5e5;
  margin: 0 auto;
}

你会得到：

enter image description here

JsBin演示：http://jsbin.com/iDAZeSi/2/

Answer 3

margin: 0 auto也适用或者你可以在内容div上使用display: inline-block并用div text-align: center

包装它

<div id="one">one</div>
<br /><br />
<div id="wrap">
    <div id="two">two</div>
</div>

的CSS

#one {
    width: 70%;
    height: 100px;
    background: #ccc;
    margin: 0 auto;
    text-align: center;
}

#wrap { text-align: center; }
#two {
    width: 70%;
    height: 100px;
    background: #ccc;
    display: inline-block;
    text-align: center;

}

http://jsfiddle.net/4KhJL/3/

如何使相对宽度的div居中？

3 个答案: