Jak wyśrodkować pojemnik pionowo w Bootstrap?

Szukam sposobu, aby pionowo wyśrodkować containerdiv wewnątrz jumbotroni ustawić go na środku strony.

.jumbotronMusi być przystosowane do pełnej wysokości i szerokości ekranu. .containerDiv ma szerokość 1025pxi powinny być w środku strony (pionowo w środku).

Chcę, aby ta strona dostosowała jumbotron do wysokości i szerokości ekranu wraz z pojemnikiem pionowo wyśrodkowanym do jumbotronu. Jak mogę to osiągnąć?

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

Elastyczny sposób na pudełko

Wyrównanie w pionie jest teraz bardzo proste dzięki zastosowaniu elastycznego układu pudełka . Obecnie ta metoda jest obsługiwana w wielu przeglądarkach internetowych z wyjątkiem Internet Explorera 8 i 9. Dlatego w IE8 / 9 musielibyśmy użyć hacków / polifillów lub różnych podejść .

Poniżej pokażę, jak to zrobić w zaledwie 3 wierszach tekstu (niezależnie od starej składni Flexboksa) .

Uwaga: lepiej jest użyć dodatkowej klasy zamiast zmieniać, .jumbotronaby osiągnąć wyrównanie pionowe. Użyłbym vertical-centerna przykład nazwy klasy.

Przykład tutaj ( lustro na 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;
}

Ważne uwagi (rozważane w wersji demo) :

1. A procentowe wartości heightlub min-heightwłaściwości jest w stosunku do heightelementu nadrzędnego, dlatego należy określić heightrodzica wyraźnie.

2. Prefiks dostawcy / stara składnia Flexbox pominięta w opublikowanym fragmencie z powodu zwięzłości, ale istnieją w przykładzie online.

3. W niektórych starych przeglądarek takich jak Firefox 9 ^{(w którym Przetestowałem)} , flex kontenera - .vertical-centerw tym przypadku - nie odbędzie się w wolnej przestrzeni wewnątrz rodzica, dlatego należy określić widthwłaściwości jak: width: 100%.

4. Również w niektórych przeglądarkach internetowych, jak wspomniano powyżej, element flex - .containerw tym przypadku - może nie pojawiać się pośrodku poziomo. Wydaje Zastosowana w lewo / prawo margino autonie ma żadnego wpływu na pozycję Flex.
   Dlatego musimy to wyrównać box-pack / justify-content.

Więcej informacji i / lub pionowe wyrównanie kolumn można znaleźć w poniższym temacie:

• wyrównanie w pionie za pomocą Bootstrap 3

Tradycyjny sposób dla starszych przeglądarek internetowych

To stara odpowiedź, którą napisałem w chwili, gdy odpowiedziałem na to pytanie. Ta metoda została tutaj omówiona i powinna działać również w Internet Explorerze 8 i 9. Wyjaśnię to krótko:

W przepływie wbudowanym element poziomu wbudowanego może być wyrównany pionowo do środka poprzez vertical-align: middledeklarację. Specyfikacja z W3C :

środek
Wyrównaj pionowy punkt środkowy pudełka z linią bazową pudełka nadrzędnego plus połowę wysokości x rodzica.

W przypadkach, gdy .vertical-centerelement nadrzędny - w tym przypadku element - ma wyraźny heightprzypadek, gdybyśmy mogli mieć element podrzędny mający dokładnie to samo heightco element nadrzędny, bylibyśmy w stanie przenieść linię bazową elementu nadrzędnego do punktu środkowego pełnego -wysokie dziecko i nieoczekiwanie sprawiają, że nasze upragnione dziecko w przepływie .container- wyrównane do środka pionowo.

Zebranie się razem

Mając na uwadze powyższe, możemy utworzyć element pełnej wysokości wewnątrz .vertical-centerprzez ::beforelub ::afterelementy pseudo a także zmienić domyślny displaytyp niego i pozostałe dziecka, .containerdo inline-block.

Następnie użyj, vertical-align: middle;aby wyrównać elementy wbudowane w pionie.

Proszę bardzo:

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

DEMO ROBOCZE .

Ponadto, aby uniknąć nieoczekiwanych problemów w dodatkowych małych ekranach, można zresetować wysokość pseudo-elementu, autolub 0lub zmienić jego displaytyp na nonerazie potrzeby tak:

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

ZAKTUALIZOWANA DEMO

I jeszcze jedno:

Jeśli wokół kontenera znajdują się footer/ headersekcje, lepiej jest odpowiednio ustawić te elementy ( relative, absolute? Do ciebie.) I dodać wyższą z-indexwartość (dla pewności), aby były zawsze na szczycie innych.

Aktualizacja 2019

Bootstrap 4 zawiera Flexbox, więc metoda centrowania w pionie jest znacznie łatwiejsza i nie wymaga dodatkowego CSS .

Wystarczy użyć klas d-flexi align-items-centernarzędzi użytkowych ..

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

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

Ważne: Centrowanie w pionie odnosi się do wysokości . Kontener nadrzędny przedmiotów, które próbujesz wyśrodkować, musi mieć określoną wysokość . Jeśli chcesz wysokość strony użyj vh-100lub min-vh-100nadrzędny! Na przykład:

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

dodaj Bootstrap.css, a następnie dodaj to do swojego css

   
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>

W Bootstrap 4 :

aby wyśrodkować dziecko w poziomie , użyj klasy bootstrap-4:

justify-content-center

aby wyśrodkować dziecko w pionie , użyj klasy bootstrap-4:

 align-items-center

ale pamiętajcie, nie zapominajcie o użyciu klasy d-flex z tymi klasami. Jest to klasa narzędziowa bootstrap-4

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

Uwaga: pamiętaj, aby dodać narzędzia bootstrap-4, jeśli ten kod nie działa

Wiem, że nie jest to bezpośrednia odpowiedź na to pytanie, ale może komuś pomóc

Moja preferowana technika:

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

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

Próbny

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>

Zobacz także to skrzypce !

Testowane w IE, Firefox i 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>

Znaleziono na https://css-tricks.com/centering-css-complete-guide/

dla bootstrap4 pionowy środek kilku przedmiotów

d-flex dla reguł flex

kolumna elastyczna dla kierunku pionowego na przedmiotach

justify-content-center do centrowania

style = 'height: 300px;' musi mieć wartości zadane, dla których środek ma być obliczony lub użyć klasy h-100

następnie dla poziomego środka div d-flex justify-content-center i trochę kontenera

więc mamy hierarhy z 3 tagów: 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> 

Jeśli używasz Bootstrap 4, wystarczy dodać 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>
<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>

Klasy: d-table, d-table-cell, w-100, h-100 i align-middle wykonają zadanie

Podaj klasę kontenera

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

Podaj div, który jest w pojemniku:

align-content: center;

Cała zawartość tego div pojawi się na środku strony.

Oto sposób, którego używam do wyrównywania zawartości w pionie - góra / środek / dół z bootstrap 3 rzędami. Bootstrap 3 kolumny o tej samej wysokości i wyrównane w pionie.

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

Tutaj jest demo JSFiddle .