如何让一个div在另一个div中水平居中？

Question

4

我有以下的代码：

可能是重复问题：
如何在父元素div中水平居中div

我的代码如下:

<div id="a">
<div id="b">abc</div>
</div>

我的第一个div "a" 的样式被设置为屏幕宽度的100%。我想让div "b" 水平居中显示。我知道可以使用表格来实现，但是否有一种只使用div和CSS就可以实现的方法呢？

希望有人能帮忙。

- Mariko

3个回答

1

最好的方法是设置子 div 的宽度，将左右边距设为自动。自动会分配相等的左右边距。

div#b { width: 100px; margin: 0 auto;}

如果您不确定子元素的宽度，您还可以将text-align:center分配给父div。这可能不是最佳方法，但可以完成工作。

div#a {text-align:center;}

- Jaspero

1

你可以通过为子div设置固定宽度，如并将左/右边距设置为自动来实现。例如：

div#b{width:40px;margin:0 auto;}

- Naveed Ahmad

1

据我理解规范，宽度不需要固定，也可以与父元素成比例。 - phihag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- phihag · Accepted Answer

你可以将margin-left和margin-right属性设置为auto。根据CSS2.1 § 10.3.3，你需要指定一个宽度（除了auto）。

#b {width: 300px; margin: 0 auto;}