[解決済み] Bootstrapでコンテナを垂直方向に中央化する方法は？

質問

を垂直方向にセンタリングする方法を探しています。 container の中にある jumbotron で、ページの真ん中に設定する。

は、その .jumbotron は、画面の縦横に合わせる必要があります。そのため .container divは幅が 1025px で、ページの真ん中（縦方向中央）にあるはずです。

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

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

解決方法は？

フレキシブルボックスの方法

垂直方向のアライメント を使うことで、非常にシンプルになりました。 柔軟なボックスレイアウト . 現在では、この方式は ワイドレンジ Internet Explorer 8 & 9 を除くウェブブラウザで利用可能です。 ポリフィル または 異なるアプローチ IE8/9の場合。

以下では、その方法を、たったの 3行 のテキスト (古いフレックスボックスの構文に関係なく) .

注 を変更する代わりに、追加のクラスを使用したほうがよいでしょう。 .jumbotron を使用して、垂直方向の整列を実現します。私なら vertical-center というクラス名で、例えば

ここに例があります (A ミラー jsbin上で) .

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <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. A 割合 の値 height または min-height プロパティは height を指定する必要があります。 height を明示的に指定します。

2. Vendor prefixed / old flexbox syntax 投稿されたスニペットでは簡潔さのために省略されていますが、オンラインの例では存在しています。

3. Firefox 9 などの一部の古い Web ブラウザでは ^{(私がテストした中では)} フレックスコンテナ .vertical-center を指定する必要があります。 width プロパティのように width: 100% .

4. また、前述のように一部のウェブブラウザでは、フレックスアイテムが .container の場合、水平方向の中央に表示されないことがあります。これは、左右の margin の auto は、フレックスアイテムには何の影響も与えません。
   
   そのため box-pack / justify-content .

列の垂直方向の配置の詳細については、以下のトピックを参照してください。

• Bootstrap 3 で垂直配向

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

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

インラインフローでは、インラインレベル要素を縦に真ん中に揃えるには、次のようにします。 vertical-align: middle 宣言を行うことができます。からの仕様 W3C :

中

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

親が .vertical-center 要素に、明示的に height もし、子要素にまったく同じ height を使えば のベースラインを移動させることができます。 をフルハイトの子の中点に合わせると、驚くことに、希望するインフローの子である .container - は、縦方向の中央に整列しています。

まとめ

とはいえ、フルハイトの要素を .vertical-center によって ::before または ::after 擬似要素を変更し、さらにデフォルトの display のタイプで、もう一方の子である .container から 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;
}

ワーキングデモ .

また、極端に小さい画面での予期せぬ問題を防ぐために、擬似要素の高さをリセットして auto または 0 を変更するか、その display タイプから none というように、必要であれば

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

UPDATED DEMO

そしてもうひとつ。

がある場合 footer / header セクションをコンテナの周囲に配置する場合は、その要素を適切に配置することをお勧めします。 ( relative , absolute は、あなた次第です)。 を追加し、さらに高い z-index の値（保証のため）で、常に上位をキープします。