Html 容器元素的中心对齐，但保持其内容的左对齐

我正在尝试创建一个KPI仪表板，每个仪表板都有自己的“分幅”显示，这些分幅是静态的

宽度和
高度（在提供的示例中为
200px
）。放置这些内容的网站将内容放在具有CSS属性的
中
margin:auto
和
width:80%
，这样做是为了让宽屏用户从内容宽度的增加中受益。我所追求的是将瓷砖左对齐，就像包含在表格中一样，但要在瓷砖容器中居中对齐（占据80%宽度主体的全宽）

我创建了一个，我以前创建的解决方案使用
JQuery
利用
$（window）.resize（）
处理程序并以编程方式设置平铺容器的
宽度
，但是我希望可以使用纯
CSS
来减少所需的
JavaScript
（我已经在页面上为
AJAX
和更新显示使用了很多内容

如何使用纯CSS获得所需的对齐方式（如下图所示）？可以添加其他元素，但希望尽可能保持结构简单

更新以澄清要求：

在我的示例中，只有3个子项，仪表板可能有任何数字。例如，如果您有5个平铺，则可以按如下方式布置（取决于可用的屏幕宽度和页面大小的更改）：


单排5个
4在第一排1在底部
3在最上面一排2在最下面一排
2排2块瓷砖，第三排1块
5排1瓦

是的，可以通过以像素为单位明确定义每个元素的宽度，但是宽度：


“代码>页面正文< /代码>元素必须是代码>宽度：80% （不是800 px/600 px，这是常见的实践），使用的屏幕房地产将被最大化（程度上），允许宽屏幕用户实际上看到更多，而不是只在屏幕的中间显示600 /800 px。
tileContainer
必须位于
pageBody
的中心，并将根据所包含的tile使用的宽度“调整大小”（这不能在
CSS
中明确定义，因为n个像素，因为仪表板的不同用户具有不同的屏幕大小，移动设备使事情变得更加有趣）。如前所述，可以通过使用
JQuery
更改页面大小的宽度来实现这一点，但我正在寻找
CSS
唯一的解决方案。

tile
元素将在
tileContainer


底部有显示所需行为的图像

HTML

3 Children:
<div class='pageBody'>
    <div class='tileContainer'>
        <div class='tile'></div>
        <div class='tile'></div>
        <div class='tile'></div>
    </div>
</div>

示例：在主体内左对齐


示例：主体内部中心对齐


示例：所需对齐

泰勒很接近。
我只是拿了他的jfiddle并稍微修改了一下。你需要在你的第二个包含div的地方加上一个宽度，然后你就可以使用marginauto将它居中

不幸的是，这与页面正文没有对齐，与第一张图像不匹配。哦，我在一个小显示器上，看不出有什么不同。这并没有使瓷砖居中。遗憾的是，这仍然不起作用，您只是将它们稍微移离左侧。您需要对其进行调整，以满足您的要求，但这是您需要的基本方法I’我想用它来居中元素。有时你也可以在父元素上使用文本对齐，但这在这里似乎不起作用（没有时间找出原因。）我做了一些调整以使其更接近。这里的想法是将对象包装在一个严格定义的居中元素中，以便其中的所有元素都“居中”即使它们是左对齐的。当然，最困难的部分是将元素并排放置。一旦你限制太多，它们会一个接一个地跳到另一个。另一个选择是使用绝对定位，如果你要用绝对值定义页面的大小。遗憾的是，这不起作用，平铺容器th必须为页面占位符宽度的100%，页面占位符宽度为80%的可用空间（您已明确设置像素宽度，但该宽度不符合要求）.正如我之前所说，我之前通过添加jQuery来根据可用宽度显式更改容器的像素宽度，但我希望在没有jQuery/JavaScript的情况下做到这一点，当然也不会限制屏幕的使用量。
.pageBody{
    width: 80%;
    margin: auto;
    background-color:lightgrey;
}.tileContainer{
    text-align:center; /*Removing this doesn't centre the tiles in their container*/
}.tile{
    background-color:purple;
    display:inline-block;
    margin:5px;
    width: 200px;
    height: 200px;
}