将div显示为居中块，没有100％宽度

Question

我知道这是一个超级基本问题，但我无法找到解决方案。我有2个div，我想将它们显示为块（一个在另一个之下）而没有100％的宽度。这是我的代码。

HTML

<div id="container">
    <div class="test">one</div>
    <div class="test">two</div>
</div>

CSS

.test {
    display:inline-block;
    clear: both;
    border:1px solid;
}

#container {
    clear:both;
    text-align:center;
}

不幸的是，answer不适合我，因为我需要水平居中块（所以在我的情况下不能应用float）。这是fiddle。提前谢谢。

Answer 1

将它们置于彼此之上，而不是100％width，仍然使用margin:auto;使用：display:table;

.test {
display:table;
margin:auto;
border:solid;/* to see it */
}

Answer 2

您可以指定div的宽度，将display更改为block，然后使用margin: 0 auto将其居中。

JSFiddle

Answer 3

您也可以通过添加50％的左偏移来居中div，然后将负边距添加到div的一半宽度。我不知道这适用于你的情况多少，但这是一个例子：

.test {
    position: relative;
    border:1px solid;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

您可以在此处看到它：http://jsfiddle.net/b8LuQ/7/

Answer 4

display:inline-block;不允许第二行。因此我删除了它并定义了div test的宽度，你可以调整它的大小，margin:auto对齐中心，这里的容器中的div都是example