在页面中心对齐很多div，有没有更简单的方法？

Question

我的代码看起来像这样：

<div id="divone"><div class="content">Content here</div></div>
<div id="divtwo"><div class="content">Content here</div></div>
<div id="divthree"><div class="content">Content here</div></div>
<div id="divfour"><div class="content">Content here</div></div>
<div id="divfive"><div class="content">Content here</div></div>
<div id="divsix"><div class="content">Content here</div></div>

css：

.content { width:960px; margin:auto;}
#divone { background-image: url(bg1.png); background-repeat: repeat;}
#divtwo { background-image: url(bg2.png); background-repeat: repeat;}
#divthree { background-image: url(bg1.png); background-repeat: repeat;}
#divfour { background-image: url(bg1.png); background-repeat: repeat;}
#divfive { background-image: url(bg1.png); background-repeat: repeat;}
#divsix { background-image: url(bg1.png); background-repeat: repeat;}

我做了一个jsfiddle让你知道我在做什么http://jsfiddle.net/64H5p/

有没有一种更简单的方法，不用每次我想要把.content对齐到中心时都添加div？我正在工作的网站每页大约有100个这样的页面。

Answer 1

div[id^='div'] div { 
  width:120px;
  margin:auto;
}

DEMO

Answer 2

您可以创建一个容器div，将其居中，并自动设置边距:0，然后将div放入其中，每个div都有100%的宽度

Answer 3

为什么不在每个外部包装器div上使用text-align:center;呢？(divone，divtwo，...)