Bir kap Bootstrap'ta dikey olarak nasıl ortalanır?

containerDiv'i dikey jumbotronolarak ortalamanın ve sayfanın ortasına yerleştirmenin bir yolunu arıyorum .

Ekranın .jumbotrontam yüksekliğine ve genişliğine uyarlanmalıdır. .containerDiv bir genişliğe sahiptir 1025pxve sayfanın (dikey merkezi) ortasında olmalıdır.

Bu sayfanın jumbotronun, jumbotronun dikey olarak ortasıyla birlikte ekranın yüksekliğine ve genişliğine uyarlanmasını istiyorum. Nasıl başarabilirim?

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

Esnek kutu yolu

Esnek kutu düzeni kullanılarak dikey hizalama artık çok basit . Günümüzde, bu yöntem Internet Explorer 8 ve 9 hariç çok çeşitli web tarayıcılarında desteklenmektedir . Bu nedenle IE8 / 9 için bazı kesmek / çoklu dolgular veya farklı yaklaşımlar kullanmamız gerekir .

Aşağıda bunu sadece 3 satırlık metinde nasıl yapacağınızı göstereceğim (eski flexbox sözdizimine bakılmaksızın) .

Not:.jumbotron dikey hizalamayı elde etmek için değiştirmek yerine ek bir sınıf kullanmak daha iyidir . vertical-centerÖrneğin sınıf adını kullanırdım .

Örnek Burada ( jsbin üzerinde bir ayna ) .

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

Önemli notlar (Demoda ele alınmıştır) :

1. Bir yüzdesi değerleri heightveya min-heightözellikleri görelidir heightnedenle belirtmelidir, ebeveyn elemanın heightaçıkça ebeveynin.

2. Satıcı, kısaltma nedeniyle yayınlanan snippet'te eski önek / eski flexbox sözdizimini atladı, ancak çevrimiçi örnekte var.

3. Firefox 9 olarak eski web tarayıcıları bazılarında ^{(ki Ive'sınav)} -, esnek konteyner .vertical-centerbu durumda - bu nedenle belirtmek gerekir, ebeveyn içindeki kullanılabilir alanı almayacağız widthgibi özellik: width: 100%.

4. Ayrıca, yukarıda belirtildiği gibi bazı web tarayıcılarında, esnek öğe - .containerbu durumda - merkezde yatay olarak görünmeyebilir. Sağ / sol uygulanan görünüyor marginait autoesnek öğe üzerinde herhangi bir etkisi yoktur.
   Bu nedenle onu hizalamamız gerekiyor box-pack / justify-content.

Daha fazla ayrıntı ve / veya sütunların dikey hizalaması için aşağıdaki konuya bakabilirsiniz:

• Bootstrap 3 ile dikey hizalama

Eski web tarayıcıları için geleneksel yöntem

Bu soruyu cevapladığımda yazdığım eski cevap bu. Bu yöntem burada tartışılmıştır ve Internet Explorer 8 ve 9'da da çalışması gerekiyordu. Kısaca açıklayacağım:

Satır içi akışta, satır içi düzey öğesi vertical-align: middlebildirimle dikey olarak ortaya hizalanabilir . Dan Spec W3C :

orta
Kutunun dikey orta noktasını üst kutunun satır taban çizgisiyle ve üst öğenin x yüksekliğinin yarısı ile hizalayın.

Ebeveynin - .vertical-centerbu durumda - açık bir şekilde olması durumunda height, herhangi bir olasılıkla heightebeveynin aynısına sahip bir alt öğeye sahip olsaydık , ebeveynin taban çizgisini tamın orta noktasına taşıyabilirdik -yüksek çocuk ve şaşırtıcı bir şekilde istenilen akış içi çocuğumuzu - .containermerkeze dikey olarak hizalayın .

Hepsini bir araya getirmek

Varlık dedi ki, biz içinde tam boy unsuru oluşturabilir .vertical-centertarafından ::beforeveya ::aftersözde elemanları ve ayrıca varsayılan değiştirmek displaybunun türünü ve diğer çocuk, .containeriçin inline-block.

Ardından vertical-align: middle;satır içi öğeleri dikey olarak hizalamak için düğmelerini kullanın .

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

ÇALIŞMA DEMOSU .

Ayrıca, karşı sözde elemanın yüksekliğini sıfırlayabilirsiniz, ekstra küçük ekranlarda beklenmedik sorunları önlemek için autoya 0ya da değiştirmek displayiçin türünü noneböylece gerekirse:

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

GÜNCEL DEMO

Ve bir şey daha:

Konteynerin etrafında footer/ headerbölümler varsa , bu elemanları uygun şekilde konumlandırmak ( relative, absolutesize bağlı). Ve z-indexher zaman diğerlerinin üstünde tutmak için daha yüksek bir değer (güvence için) eklemek daha iyidir .

2019 Güncellemesi

Bootstrap 4 flexbox içerir, bu nedenle dikey merkezleme yöntemi çok daha kolaydır ve ekstra CSS gerektirmez .

Ve d-flexve align-items-centersınıflarını kullanın .

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

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

Önemli: Dikey merkezleme yüksekliğe göredir . Merkezlemeye çalıştığınız öğelerin üst kabı belirlenmiş bir yüksekliğe sahip olmalıdır . Sayfanın yüksekliğini veya ebeveyni kullanmak istiyorsanız ! Örneğin:vh-100min-vh-100

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

Bootstrap.css ekleyin ve bunu css'nize ekleyin

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

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

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

In Bootstrap 4 :

için yatay çocuğu ortalamak , kullanım önyükleme-4 sınıfı:

justify-content-center

için dikey çocuğu ortalamak , kullanım önyükleme-4 sınıfı:

 align-items-center

ama hatırlayın d-flex sınıfını bunlarla kullanmayı unutmayın.

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

Not: Bu kod çalışmazsa bootstrap-4 yardımcı programları eklediğinizden emin olun

Bu sorunun doğrudan cevabı olmadığını biliyorum ama birisine yardımcı olabilir

Tercih ettiğim teknik:

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

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

gösteri

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <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>

Ayrıca bkz bu Fiddle !

IE, Firefox ve Chrome'da test edildi.

.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/ adresinde bulundu

birkaç öğenin bootstrap4 dikey merkezi için

esnek kurallar için d-flex

öğelerde dikey yön için esnek sütun

merkezleme için justify-content-center

stil = 'yükseklik: 300 piksel;' Merkezin kireçli olduğu veya h-100 sınıfının kullanıldığı ayar noktaları için olmalıdır

yatay merkez div d-flex bloklama içeriği merkezi ve bazı kaplar için

3 etiket hiyerarşimiz var: 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> 

Bootstrap 4 kullanıyorsanız, sadece 2 div eklemeniz gerekir:

.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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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

Sınıflar: d-table, d-table-cell, w-100, h-100 ve align-middle işi yapacak

Kapsayıcı sınıfını verin

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

Kabın içindeki div değerini verin:

align-content: center;

Bu div içindeki tüm içerik sayfanın ortasında görünecektir.

İçeriği dikey olarak hizalamak için kullandığım yol şu şekildedir - üst / orta / alt önyükleme 3 satırları ile. Aynı yükseklikte ve dikey olarak hizalanmış 3 sütun önyükleme.

/* 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><!-- ./row -->
</div><!-- ./container -->

İşte bir JSFiddle demosu.