Bootstrapでコンテナを垂直方向にセンタリングする方法は？

ジャンボトロン内のcontainer divを垂直方向にセンタリングして、ページの真ん中に設定する方法を探しています'。

.jumbotronは、画面の高さと幅に完全に合わせなければならない。container div は幅が 1025px で、ページの中央（縦方向中央）に配置する必要があります。

このページでは、ジャンボトロンを画面の高さと幅に合わせ、コンテナをジャンボトロンに対して垂直方向に中央に配置したいです。どうすれば実現できるでしょうか？

TylerH
編集された質問 26日 9月 2019 в 2:47
プログラミング
html css twitter-bootstrap-3 twitter-bootstrap vertical-alignment
5日 3月 2014 в 11:36
11 ビュー
質問へのコメント (2)
ソリューション

The Flexible box way

フレキシブルボックスレイアウト]1を使用することで、縦方向の配置が非常に簡単になりました。現在、この方法はInternet Explorer 8 & 9を除くWebブラウザの幅広い範囲でサポートされている。

以下では、それをたった3行のテキストで実現する方法を紹介します（古いフレックスボックスの構文に関係なく）。

注：.jumbotronを変更する代わりに、追加のクラスを使用して垂直方向の整列を達成する方がよいでしょう。例えば、vertical-center`クラス名を使用します。

[Example Here][5] (A Mirror on jsbin).

<div class="jumbotron vertical-center"> 
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

重要な注意事項 (デモで考慮)：

1.heightやmin-heightプロパティの*percentage*値は、親要素のheightに対する相対値なので、明示的に親のheight`を指定する必要があります。

2.ベンダープレフィックス/旧フレックスボックス構文は、簡潔にするために掲載したスニペットでは省略されていますが、オンラインの例では存在しています。

3.Firefox 9のような古いWebブラウザでは、フレックスコンテナ（この場合は .vertical-center ）が親の中の空きスペースを占有しないため、widthプロパティを以下のように指定する必要があります：width: 100%` のように指定します。

4.また、上記のように一部のウェブブラウザでは、フレックスアイテム（この場合は .container ）が水平方向の中央に表示されないことがあります。これは、フレックスアイテムに適用される auto の左右の margin が効果を発揮していないようです。
そのため、box-pack / justify-contentで整列させる必要があります。

カラムの垂直配置の詳細については、以下のトピックを参照してください：

レガシーなウェブブラウザのための伝統的な方法

この質問に回答した当時に書いた古い回答です。この方法は、こちらで議論されており、Internet Explorer 8と9でも動作することになっています。簡単に説明します：

インラインフローでは、vertical-align: middle宣言により、インラインレベル要素を垂直方向に中央揃えにすることができる。W3C]9からの仕様：

middle ボックスの垂直方向の中点を、親ボックスのベースラインに親のx-heightの半分を加えた位置に揃える。

親要素（この場合は .vertical-center 要素）が明示的に height を持つ場合、ひょっとして親と全く同じ height を持つ子要素があれば、フルハイトの子の中点に 親のベースラインを移動 できるので、意外にも目的の流入子（.container ）を垂直方向の中央に揃えることができます。

まとまる

とはいえ、 .vertical-center 内に ::before または ::after 擬似要素でフルハイトの要素を作成し、その要素ともう一つの子である .container のデフォルトの display タイプを inline-block に変更することができます。

次に、vertical-align: middle;を使って、インライン要素を縦に揃えます。

お待たせしました：

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

【ワーキングデモ】11です。

また、非常に小さな画面での予期せぬ問題を防ぐために、必要に応じて擬似要素の高さを auto または 0 にリセットしたり、その display タイプを none に変更することができます：

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

**デモ更新＊＊＊＊＊。

そしてもうひとつ：

コンテナの周囲に footer/header のセクションがある場合、その要素を適切に配置し (relative, absolute? up to you.) 、高い z-index 値を追加して（保証のために）常に他の要素の上に置いておく方がよいでしょう。

Community
編集した答え 23日 5月 2017 в 12:26
解説 (2)

2019年更新。 ------。

Bootstrap 4 にはフレックスボックスが含まれているため、垂直方向のセンタリングの方法ははるかに簡単で、追加のCSSは必要ありません。

d-flexおよび align-items-centerユーティリティクラスを使用してください。.

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv。

重要:垂直方向の中心は高さに対してです。 中心に配置しようとしているアイテムの親コンテナには、定義された高さが必要です。 ページの高さが必要な場合は、親に「vh-100」または「min-vh-100」を使用します。! 例:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>
< hr />。 参照:https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4。
Zim
編集した答え 26日 9月 2019 в 3:00
解説 (0)

Bootstrap.cssを追加し、次のコードをあなたのcssに追加してください。

解説 (1)

ブートストラップ4 :

子供を水平に中心に置くには、bootstrap-4クラスを使用します。

justify-content-center

子供を垂直に中心に置くには、bootstrap-4クラスを使用します。

 align-items-center

ただし、これらで d-flex クラスを使用することを忘れないでください。 それは、ブートストラップ4ユーティリティクラスです。

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

注:このコードが機能しない場合は、必ずbootstrap-4ユーティリティを追加してください。

私はそれがこの質問への直接の答えではないことを知っていますが、それは誰かを助けるかもしれません。

解説 (1)

私の得意とする技法．

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

デモ

John Slegers
編集した答え 19日 5月 2016 в 11:26
解説 (0)

IE、Firefox、Chromeでテストされています。

。

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

.child-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

。

https://css-tricks.com/centering-css-complete-guide/にあります。

TylerH
編集した答え 26日 9月 2019 в 2:48
解説 (0)

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

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

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

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

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

次に、水平中心 div d-flex asjustice-content-center の場合。 そしていくつかのコンテナ。

つまり、3つのタグの階層があります。div-column -> div-row -> div-container。

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

Bootstrap 4を使用している場合は、2 divを追加するだけです。

。

.jumbotron{
  height:100%;
  width:100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

。

クラス:d-table、d-table-cell、w-100、h-100、align-middleが機能します。

解説 (0)

コンテンツを垂直に配置するために使用する方法は次のとおりです-ブートストラップ3行のトップ/センター/ボトム。 同じ高さで垂直に配置されたブートストラップ3カラム。

。

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div>
</div>

。

[JSFiddle][1]デモです。

TylerH
編集した答え 26日 9月 2019 в 2:50
解説 (0)