Bir şekilde dikey olarak jumbotron içinde container sayı hizalama için merkezi ve sayfanın ortasında ayarlamak için arıyorum.

.jumbotron Bu CSS kullandım ekranın tam yükseklik ve genişlik adapte edilmelidir.

.jumbotron{
  heght:100%;
  width:100%;
}

.container div 1025px genişliği ve sayfanın ortasındaki (dikey merkezi) olmalıdır.

.container{
  width:1025px;
}

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

Benim HTML gibi

<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>    

Bu sayfa büyük tribünlere geçmiş yüksekliği adapte olmasını istiyorum ve kabı ile birlikte ekran genişliği dikey büyük tribünlere geçmiş için merkezi. Bunu nasıl elde edebilirsiniz?

Esnek kutu gibi

Dikey hizalamaşimdi Flexible box layout kullanımı çok basittir. Günümüzde, bu yöntem, Internet Explorer dışındaki web tarayıcıları 8 & 9 wide range destekleniyor. Bu nedenle/polyfills ya different approaches IE8/9 için bazı kesmek kullanmak lazım.

Aşağıda sadece bunu yapmak için nasıl size göstereceğim3 satırmetin(eski flexbox sözdizimi ne olursa olsun).

Not:daha iyi .jumbotron dikey hizalama elde etmek için değiştirerek yerine ek bir sınıf kullanmak için. Örneğin vertical-center sınıf adı kullanmak istiyorum.

Example Here(BirMirrorüzerinde 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;
}

Önemlinotlar(Demo olarak):

1. Biryüzdesiheight min-height özellikleri değerleri ana öğe height göre, bu nedenle üst height açıkça belirtmek gerekir.

2. Satıcı kısalığı nedeniyle / eski flexbox sözdizimi gönderildi parçasında ihmal öneki, ama internette örnek var.

3. Firefox 9 gibi eski web tarayıcıları bazı^{hangi test ettim ()}konteyner - .vertical-center bu durumda üst içinde kullanılabilir alanı sürmez flex, bu nedenle width özelliği gibi belirtmek gerekiyor: width: 100%.

4. Web tarayıcıların bazıları yukarıda da flex öğe .container bu durumda Merkez yatay olarak görünmeyebilir. auto margin flex öğe üzerinde herhangi bir etkisi yoktur uygulamalı Sol/Sağ görünüyor.
   Bu nedenle box-pack / justify-content ile uyumlu hale getirmek için ihtiyacımız var.

Sütun ayrıntıları ve/veya dikey hizalama daha fazla bilgi için konusuna bakın:

• vertical-align with bootstrap 3

Eski tarayıcılar için geleneksel yolu

Bu soruyu cevapladım zamanda yazdığım eski cevaptır. Bu yöntem tartışıldıhereve Internet Explorer 8 ve 9 da işe yaraması gerekiyor. Kısaca açıklayayım:

Satır içi akış içinde satır içi eleman düzey bir orta dikey vertical-align: middle beyanları ile uyumlu olabilir. W3C Spec:

orta
Üst kutu artı x-yüksekliği üst yarısı temel kutusundan dikey orta noktasını hizalayın.

Durumlarda üst - .vertical-center öğesi, bu durumda - açık height, herhangi bir şans varsa, bir alt öğesi olan aynı height üst, biz mümkün olacaktır to move the baseline of the parent orta ve tam boy alt ve şaşırtıcı bir şekilde yapmak bizim istenen akış çocuk .container hizalı için merkezi dikey olarak.

Hepsini bir araya getirmek

Bu söyleniyor, biz-ebil yaratmak tam yükseklik öğesi içinde .vertical-center ::before ::after pseudo elementler ve de değiştirmek varsayılan display tür ve diğer alt .container inline-block.

Sonra vertical-align: middle; satır içi öğeler dikey olarak hizalamak için kullanın.

Al bakalım:

<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;
}

WORKING DEMO.

Ayrıca, beklenmedik sorunları önlemek için ekstra küçük ekran, reset yüksekliği sözde elemanı için auto 0 değişim display tipi none gerekirse:

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

UPDATED DEMO

Ve bir şey daha var

Eğer kabın etrafınafooter/header bölümler varsa, daha iyi bu elementler düzgün bir pozisyon için(relative, absolute? size kalmış.)ve z-index daha yüksek bir değer (güvence için) her zaman başkalarının üstüne onları tutmak için ekleyin.