同一行上的两个 Div 并居中对齐

我有两个像这样的div

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

我希望它们显示在同一行，所以我使用float:left.

我希望它们都位于页面的中心，所以我尝试用另一个 div 将它们包裹起来，如下所示

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

但这不起作用。如果我将代码更改为这样

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

然后它会转到中心，但是水平滚动条在那里，而且看起来它也没有真正居中。

您能建议我如何实现这一目标吗？谢谢。

编辑：我希望内部 div（Div 1 和 Div 2）也居中对齐。

你可以这样做

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>  

http://jsfiddle.net/jasongennaro/MZrym/ http://jsfiddle.net/jasongennaro/MZrym/

1. 将它包裹在一个div with text-align:center;
2. 给予内在divs a display:inline-block;代替float

最好将该 CSS 放入样式表中。