水平居中div中的元素

Question

所以我需要创建3或4个正方形居中的布局。就像现在很多不同的屏幕（我目前有21个philips，macbook 13和ipad），并且所有的屏幕都是不同的。

所以我需要它在任何屏幕居中。这里是一些我的代码：

一些CSS：

#main{ 
border: 1px solid red; 
margin: auto; 
} 
#block{ 
display: inline-block; 
padding: 110px; 
border: 1px solid red; 
margin: 10px 10px; 
overflow:hidden; 
} 

一些HTML：

<div id="wrapper"> 
<div id="header"> 
header 
</div> 
<div id="main"> 
<div id="block">main</div> 
<div id="block">main</div> 
<div id="block">main</div> 
<div id="block">main</div> 
<div id="block">main</div> 
<div id="block">main</div> 
<div style="clear:both"></div> 
</div> 
</div> 

我尝试不同的方式与一些额外的div ...

所以我需要这个广场会自动集中在任何s creens

Answer 1

由于您只是使用inline-block，因此您可以居中放置容器的文本。

另外，使用非唯一元素的类。

小提琴：http://jsfiddle.net/LWTNB/3/

更新HTML：

<div id="wrapper"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
     <div class="block">main</div> 
    </div> 
</div> 

更新CSS：

#main{ 
    border:1px solid red; 
    text-align:center; /* solution */ 
} 

.block{ 
    display:inline-block; 
    padding:110px; 
    border:1px solid red; 
    margin:10px 10px; 
    overflow:hidden; 
}