CSS中心显示内嵌块？
我有一个工作代码在这里： http : //jsfiddle.net/WVm5d/ （你可能需要使结果窗口更大，看看alignment中心效应）
题
代码工作正常，但我不喜欢有display: table; 。 这是我能制作包装类alignment中心的唯一方法。 我认为这会更好，如果有一种方法来使用display: block; 或者display: inline-block; 。 是否有可能以另一种方式解决alignment中心问题？
添加一个固定的容器是不是我的select。
如果JS Fiddle链接在将来被破坏，我也会在这里粘贴我的代码：
HTML
<div class="wrap"> <div class="sidebar"> Sidebar </div> <div class="container"> <div class="box"> Height1 </div> <div class="box"> Height2<br /> Height2 </div> <div class="box"> Height3<br /> Height3<br /> Height3 </div> <div class="box"> Height1 </div> <div class="box"> Height2<br /> Height2 </div> <div class="box"> Height3<br /> Height3<br /> Height3 </div> </div> <div class="sidebar"> Sidebar </div> </div>
CSS
body { background: #bbb; } .wrap { background: #aaa; margin: 0 auto; display: table; overflow: hidden; } .sidebar { width: 200px; float: left; background: #eee; } .container { margin: 0 auto; background: #ddd; display: block; float: left; padding: 5px; } .box { background: #eee; border: 1px solid #ccc; padding: 10px; margin: 5px; float: left; } .box:nth-child(3n+1) { clear: left; }
尝试这个。 我添加了text-align: center到body并display:inline-block来包装，然后删除了display: table
body { background: #bbb; text-align: center; } .wrap { background: #aaa; margin: 0 auto; display: inline-block; overflow: hidden; }
如果你有一个<div>与text-align:center; ，那么它内部的任何文本将相对于该容器元素的宽度居中。 inline-block元素被视为文本为此目的，所以他们也将居中。
你也可以通过定位来做到这一点，将父div设置为relative和child div为绝对值。
.wrapper { position: relative; } .childDiv { position: absolute; left: 50%; transform: translateX(-50%); }
我只是改变了2个参数：
.wrap { display: block; width:661px; }
现场演示
你不需要使用“display：table”。 您的保证金：0自动居中尝试不起作用的原因是因为您没有指定宽度。
这将工作得很好：
.wrap { background: #aaa; margin: 0 auto; width: some width in pixels since it's the container; }
你不需要指定display：block，因为这个div默认是阻塞的。 你也可能会失去溢出：隐藏。
伟大的文章，我发现最适合我的是添加一个％的大小
.wrap { margin-top:5%; margin-bottom:5%; height:100%; display:block;}
只要使用：
line-height:50px
将“50px”replace为与div相同的高度。
