pure.CSS：响应式居中列答案

【问题标题】：pure.CSS: responsive centered columnspure.CSS：响应式居中列
【发布时间】：2017-01-16 22:21:14
【问题描述】：

使用 Bootstrap 3，有一个简单的解决方案可以将多个列居中，如下所述：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

是否可以使用 Yahoo pure.CSS 做到这一点？如果是，如何？

感谢您的建议和帮助！

【问题讨论】：

标签： yui-pure-css

【解决方案1】：

您可以通过创建一个新的 CSS 帮助器类来将 .pure-u-* 项目置于纯网格 div (.pure-g) 中的中心来实现此目的：

.center {
  justify-content: center;
}

justify-content 被使用是因为.pure-g 使用弹性盒子。将.center 类添加到定义纯网格的div 之后，子元素将居中：

<div class="pure-g center" style="background-color:blue">
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:teal">
      column 1
    </div>
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:red">
      column 2
    </div>
</div>

这个CodePen 有两个居中响应网格的例子。

【讨论】：

太棒了！谢谢，这正是我想要的。