Twitter Bootstrap - 要素を水平または垂直に中央に配置する方法

Update：この回答は2013年初頭には正しかったと思われますが、もう使うべきではありません。正しい解答はオフセットを使用するです。

他のユーザーからの提案としては、次のようなネイティブのブートストラップクラスもあります：

class="text-center"
class="pagination-centered"

Henningと@trejderに感謝します。

Bootstrapドキュメントから:

要素を「表示:ブロック」に設定し、「マージン」を介して中央に配置します。 ミキシンとクラスとして利用できます。

<div class="center-block">...</div>

この質問への将来の訪問者のために:

画像をdivの中央に配置しようとしているが、画像が中央に配置されていない場合、これはあなたの問題を説明している可能性があります。

[問題のjsFiddle DEMO](https://jsfiddle.net/e0cr1nL2/)。

<div class="col-sm-4 text-center">

</div>

img-responsiveクラスは、画像タグに display:block命令を追加します。これにより、 text-align:center( text-centerクラス)が機能しなくなります。

ソリューション:

<div class="col-sm-4">

</div>

[ jsソリューションのフィドル](https://jsfiddle.net/e0cr1nL2/1/)。

center-blockクラスを追加すると、 img-responsiveクラスを使用して入力された display:block命令がオーバーライドされます。

「img-responsive」クラスがなければ、画像は「text-center」クラスを追加するだけで中心になります。

---。

更新:

また、flexboxの基本と使い方を知っておく必要があります。 [Bootstrap4がネイティブに使用するようになりました](.

これは、ペースの速い[Brad Schiffによるビデオチュートリアル](https://www.youtube.com/watch)です?v = k32voqQhODc)。

これが素晴らしい[チートシート]です(https://yoksel.github.io/flex-cheatsheet/)。

2018年更新。

Bootstrap 4 では、 centering メソッドが変更されました。.

BS4の水平センター。

-「text-center」は「display:inline」要素に引き続き使用されます。 -mx-autoは center-blockを中央の display:flex子に置き換えます。 -offset- * または mx-autoを使用してグリッド列を中央に配置できます。

mx-auto(auto x-axisマージン)は、定義幅( %、 vw、 pxなど)を持つ display:blockまたは display:flex要素を中心にします。.)。 ** Flexboxはデフォルトでグリッド列で使用されるため、さまざまなフレックスボックスセンタリングメソッドもあります。

デモブートストラップ4水平方向中央。

BS4の垂直方向の中央値については、 https://stackoverflow.com/a/41464397/171456を参照してください。

このようにcssファイルに直接書き込むことができます。

。

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >

   <p> some text </p>
  </div>

。

これを使っている

    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }


    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>

水平方向のセンタリングには、次のような方法がある：

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

私は同様の質問からこの解決策が好きです。 https://stackoverflow.com/a/25036303/2364401実際のテーブルデータ < td>およびテーブルヘッダー < th>要素にブートストラップ text-centerクラスを使用します。 そう。

< td class = "text-center"> Cell data< / td>。

と。

< th class = "text-center"> Header cell data< / th>。

ブートストラップ4ではフレックスを使用できます。

<div class="d-flex justify-content-center align-items-center">
    Create
</div>

出典:ブートストラップ4.1。

Bootstrap 4でこれを行うことができることを発見しました。

中央水平は確かに「テキスト中心」クラスです。

中央垂直ただし、ブートストラップクラスを使用すると、両方の「mb-auto mt-auto」が追加され、マージントップとマージンボトムが自動に設定されます。

bootstrap4の少数のアイテムの垂直中心。

d-flex フレックスルール用。

フレックスカラムアイテムの垂直方向。

justify-content-center センタリング用。

style = 'height:300px;' は、中心が計算されるか、 h-100 クラスを使用する設定ポイントに対して必要です。

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div> 

bootstrap 4 + Flexはこれを解決します。

あなたが使うことができます。

。

<div class="d-flex justify-content-center align-items-center">
    Create
</div>

。

それは水平および垂直に中心中心にあるはずです。