试图集中一堆col-md-10 div而不是居中

Question

我试图集中一堆容器内的文章。我目前正在使用帮助程序类center-block和容器上的css float: none;但它没有居中。我试图将center-block放在实际的col-md-10文章容器中，但这会产生类似三角形的效果。

我怎样才能使文章中心和我做错了什么？

<template>
  <div class="articles">
    <h1 v-text="title"></h1>
    <div v-if="Object.keys(articles).length !== 0" class="center-block">
      <div v-for="article in articles" class="col-md-10 article-border">
        <h1 v-text="article.title"></h1>
        <img :src="article.image" class="pull-left img-responsive margin10 thumb img-thumbnail">
        <p v-text="article.content">
        </p>
        <a class="btn btn-success pull-right marginBottom10" :href="article.url">Continue Reading..</a>
      </div>
    </div>
    <div v-else>No Articles Found!</div>
  </div>
</template>

...

.center-block {
    float: none;
}

目前输出：

所需输出：

JSFiddle：https://jsfiddle.net/rx9ohzg3/1/