css - 項目を列数で中央揃えにする方法は?

Question

1 から任意のリスト項目で動的に埋められる順序付けられていないリストがあります。このリストは、列数を使用して列としてスタイル設定されています。リストに 3 つ以上の項目があれば、すべて問題ありません。しかし、アイテムが 2 つまたは 1 つしかない場合は、それらを真ん中に配置したいと考えています。

HTML:

<ul class="list">
    <li class="list-item">Text</li>
    <li class="list-item">Text</li>
 </ul>

CSS:

.list { 
    -moz-column-count: 3;
    -moz-column-gap: 1px; }`

.list-item {
    position: relative;
    padding: 0.46667rem 1.2rem;
    overflow: hidden;
    border-bottom: 1px solid #FFF;
    background-color: #EEE;
}

デモ: http://codepen.io/anon/pen/NPBKBd

ここに画像があります：