[解決済み] Bootstrapのカラムでコンテンツを中央に配置する方法は？

質問

コラムの内容を中央揃えにしようとしています。私の場合、うまくいかないようです。以下は私のHTMLです。

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

JSFiddleデモ

解決方法は？

使用する。

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

ではなく

<div class="col-xs-1 center-block">

bootstrap 3 の css を使うこともできます。

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 には、コンテンツを中央に配置するフレックスクラスが追加されました。

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

なお、デフォルトでは x-axis がなければ flex-direction は column