我在这里有一个有效的代码：（您可能需要将结果窗口放大以查看居中对齐效果）

题

该代码工作正常，但我不喜欢这样display:table;。这是使环绕类对齐中心的唯一方法。我认为，如果有一种使用方法display:block;或更好display: inline-block;。是否可以用其他方法解决对齐中心？

对我来说，向容器添加一个固定的不是一个选择。

如果将来JS Fiddle链接损坏，我还将在这里粘贴代码：

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;

}


<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>