コンテンツをブートストラップ列の中央に配置するにはどうすればよいですか？

列のコンテンツを中央に配置しようとしています。それは私のために働くようには見えません。これが私の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">

ブートストラップ3cssを使用することもできます。

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

Bootstrap 4には、コンテンツを中央に配置するflexクラスがあります。

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

デフォルトでは、そうでx-axisない場合flex-directionはそうであることに注意してくださいcolumn

[2020年12月更新]：5.0 Bootstrapのテスト済みおよび付属バージョン。

私はこの質問が古いことを知っています。そして、質問には、彼が使用していたBootstrapのバージョンについては触れられていませんでした。したがって、この質問に対する答えは解決されたと思います。

（私のような）誰かがこの質問に出くわし、現在のブートストラップ5.0（2020）および4.5（2019）フレームワークを使用して答えを探している場合は、ここに解決策があります。

ブートストラップ4.5および5.0

d-flex justify-content-center列divで使用します。これにより、すべてがその列の中央に配置されます。

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

列内のテキストを揃えたい場合は、 text-center

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

列内にテキストと画像がある場合は、とを使用する必要がd-flex justify-content-centerありtext-centerます。

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

ブートストラップの命名規則には独自のスタイルがあり、col-XS-1は、含まれている要素の幅の8.33％である列を参照します。あなたのテキストは、おそらく指定された幅をはるかに超えて拡大し、その中で中央に配置することはできません。divに制約したい場合は、cssword-breakのようなものを使用できます。

テキストを超えて展開するのに十分な大きさの要素内でコンテンツを中央に配置するには、2つのオプションがあります。

オプション1：HTMLセンタータグ

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

オプション2：CSSテキスト-整列

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

すべてを列の幅に制限したい場合

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

更新-Bootstrapのテキストセンタークラスの使用

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

FlexBoxメソッド

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

物事を複雑にする必要はありません。Bootstrap 4では、margin autoクラスを使用して、列内でアイテムを水平方向に整列させることができます。my-auto

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

ブートストラップ4、フレックスボックスを使用してコンテンツを水平および垂直に整列

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

ブートストラップクラスalign-items-centerとjustify-content-centerを使用します

.page-hero {
  height: 200px;
  background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="page-hero d-flex align-items-center justify-content-center">
  <h1>Some text </h1>
</div>

のtext-center代わりに使用してくださいcenter-block。

またはcenter-block、スパン要素で使用します（配置がよく見えるように、列を広くしました）：

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

これは簡単な方法です。

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

数6つのコントロール幅カラム。

//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center

float:none; margin:auto;スタイリングを追加して、列のコンテンツを中央に配置できます。

上記のいずれも機能しない場合（私の場合のように入力を中央に配置しようとしている場合）、Boostrap4オフセットを使用しました。

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>