html – 在第三个容器div内水平对齐2个div

我有以下代码：

<div id="container">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>

我希望能够将#box1和#box2放在容器内的另一个旁边.容器居中

这将使容器居中,并使其中的两个div居中,同时将样式与实际内容分开：

HTML：

<div id="container">
    <div>Div 1</div>
    <div>Div 2</div>
</div>

CSS：

#container > div
{
    display: inline-block;
    border: solid 1px #000;
}
#container
{
    border: solid 1px #ff0000;
    text-align: center;
    margin: 0px auto;
    width: 40%;
}

工作范例：

http://jsfiddle.net/JLjjK/

2017年更新：

Flexbox正变得越来越普遍.以下是使用Flexbox实现类似结果的方法：

HTML：

<div class="outer">
  <div>1</div>
  <div>2</div>
</div>

CSS：

.outer {
  border: 1px solid #000;
  display:flex;
  justify-content: center;
  padding: 3px;
}
.outer > div {
  border: 1px solid #000;
  margin:2px;
}

示例： https://jsfiddle.net/pb61a1cj/1/