请 css 大佬帮忙看下这个居中难题，折腾了 3 个小时还没解决

代码：


<html>
    <body>
        <div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
        </div>
    </body>
</html>

预期效果是 div 列表居中，但列表内容不居中（像例图中的效果，最后一行在左边）

如果直接 text-align: center ，最后一行也会被居中如果再套一层 div 再 text-align: center ，因为一行显示不下的情况下内层 div 宽度是 100%，所以外层的 center 根本没生效，尝试了一堆 flex width:fit-content 之类的样式全都不能 trim 内层 div

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/910482