Wie zentriere ich einen Container in Bootstrap vertikal?

Ich suche nach einer Möglichkeit, das containerDiv vertikal innerhalb des jumbotronzu zentrieren und es in die Mitte der Seite zu setzen.

Das .jumbotronmuss an die volle Höhe und Breite des Bildschirms angepasst werden. Das .containerDiv hat eine Breite von 1025pxund sollte sich in der Mitte der Seite befinden (vertikal in der Mitte).

Ich möchte, dass auf dieser Seite das Jumbotron an die Höhe und Breite des Bildschirms angepasst wird und der Container vertikal zum Jumbotron zentriert ist. Wie kann ich das erreichen?

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

Der flexible Box-Weg

Die vertikale Ausrichtung ist jetzt durch die Verwendung des flexiblen Box-Layouts sehr einfach . Heutzutage wird diese Methode in einer Vielzahl von Webbrowsern mit Ausnahme von Internet Explorer 8 und 9 unterstützt. Daher müssten wir einige Hacks / Polyfills oder andere Ansätze für IE8 / 9 verwenden.

Im Folgenden zeige ich Ihnen, wie das in nur 3 Textzeilen geht (unabhängig von der alten Flexbox-Syntax) .

Hinweis: Es ist besser, eine zusätzliche Klasse zu verwenden, als sie .jumbotronzu ändern , um die vertikale Ausrichtung zu erreichen. Ich würde vertical-centerzum Beispiel den Klassennamen verwenden.

Beispiel hier (Ein Spiegel auf 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;
}

Wichtige Hinweise (in der Demo berücksichtigt) :

1. Ein Prozentwert von heightoder min-heightEigenschaften bezieht sich auf den Wert des heightübergeordneten Elements. Daher sollten Sie den Wert des übergeordneten Elements heightexplizit angeben .

2. Herstellerpräfix / alte Flexbox-Syntax wurde aus Gründen der Kürze im veröffentlichten Snippet weggelassen, ist jedoch im Online-Beispiel vorhanden.

3. In einigen alten Webbrowsern wie Firefox 9 ^{(in dem ich getestet habe)} nimmt der Flex-Container - .vertical-centerin diesem Fall - nicht den verfügbaren Speicherplatz im übergeordneten Element ein. Daher müssen wir die widthEigenschaft wie folgt angeben : width: 100%.

4. Auch in einigen der oben genannten Webbrowser wird das Flex-Element - .containerin diesem Fall - möglicherweise nicht horizontal in der Mitte angezeigt. Es scheint, dass das angewendete Links / Rechts marginvon autokeinen Einfluss auf das Flex-Element hat.
   Deshalb müssen wir es durch ausrichten box-pack / justify-content.

Weitere Details und / oder die vertikale Ausrichtung von Spalten finden Sie im folgenden Thema:

• vertikal mit Bootstrap 3 ausrichten

Der traditionelle Weg für ältere Webbrowser

Dies ist die alte Antwort, die ich geschrieben habe, als ich diese Frage beantwortet habe. Diese Methode wurde diskutiert hier und es an der Arbeit in Internet Explorer 8 und 9 als auch angenommen. Ich werde es kurz erklären:

Im Inline-Flow kann ein Inline-Level-Element durch vertical-align: middleDeklaration vertikal zur Mitte ausgerichtet werden . Spezifikation von W3C :

Mitte
Richten Sie den vertikalen Mittelpunkt des Felds an der Grundlinie des übergeordneten Felds plus der halben x-Höhe des übergeordneten Felds aus.

In Fällen, in denen das übergeordnete .vertical-centerElement - in diesem Fall ein explizites heightElement hat height, können wir die Grundlinie des übergeordneten Elements auf den Mittelpunkt des vollständigen Elements verschieben, wenn wir möglicherweise ein untergeordnetes Element haben, das genau dasselbe wie das übergeordnete Element hat -Höhe Kind und überraschenderweise machen unser gewünschtes In-Flow-Kind - das .container- vertikal zur Mitte ausgerichtet.

Alles zusammen bekommen

Davon abgesehen könnten wir ein Element voller Höhe innerhalb der .vertical-centerby- ::beforeoder ::afterpseudo-Elemente erstellen und auch den Standardtyp displaydavon und das andere untergeordnete Element , das .containerto, ändern inline-block.

Verwenden Sie dann vertical-align: middle;, um die Inline-Elemente vertikal auszurichten.

Bitte schön:

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

ARBEITSDEMO .

Um unerwartete Probleme in besonders kleinen Bildschirmen zu vermeiden, können Sie die Höhe des Pseudoelements auf autooder zurücksetzen 0oder den displayTyp nonebei Bedarf auf Folgendes ändern :

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

AKTUALISIERTE DEMO

Und noch etwas:

Wenn es footer/ headerAbschnitte um den Behälter, es ist besser zu positionieren , dass die Elemente richtig ( relative,absolute ? Bis zu Ihnen.) Und einen höheren hinzufügen z-indexWert (für Sicherheit) , um sie immer auf der Oberseite des anderen zu halten.

Update 2019

Bootstrap 4 enthält Flexbox, sodass die Methode der vertikalen Zentrierung viel einfacher ist und kein zusätzliches CSS erfordert .

Verwenden Sie einfach die d-flexund align-items-centerUtility-Klassen.

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

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

Wichtig: Die vertikale Zentrierung ist relativ zur Höhe . Der übergeordnete Container der Elemente, die Sie zentrieren möchten, muss eine definierte Höhe haben . Wenn Sie die Höhe der Seite wünschen, verwenden Sie vh-100oder min-vh-100auf dem übergeordneten! Zum Beispiel:

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

Fügen Sie Bootstrap.css hinzu und fügen Sie dies Ihrem CSS hinzu

   
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 :

um horizontal das Kind Zentrum Verwendung Bootstrap-4 - Klasse:

justify-content-center

um das Kind zu Zentrum vertikal , Verwendung Bootstrap-4 - Klasse:

 align-items-center

Aber denken Sie daran, vergessen Sie nicht, die D-Flex- Klasse zu verwenden. Dies ist eine Bootstrap-4-Dienstprogrammklasse

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

Hinweis: Stellen Sie sicher, dass Sie Bootstrap-4-Dienstprogramme hinzufügen, wenn dieser Code nicht funktioniert

Ich weiß, dass es nicht die direkte Antwort auf diese Frage ist, aber es kann jemandem helfen

Meine bevorzugte Technik:

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

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

Demo

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>

Siehe auch diese Geige !

Getestet in IE, Firefox und 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>

Gefunden auf https://css-tricks.com/centering-css-complete-guide/

für Bootstrap4 vertikale Mitte weniger Elemente

d-flex für Flexregeln

Flex-Säule für vertikale Richtung auf Gegenständen

Justify-Content-Center für die Zentrierung

style = 'height: 300px;' muss für Sollwerte haben, bei denen der Mittelpunkt berechnet werden soll, oder muss die Klasse h-100 verwenden

dann für horizontale Mitte div d-flex rechtfertigen-Inhalts-Mitte und einige Container

Wir haben also eine Hierarchie von 3 Tags: 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> 

Wenn Sie Bootstrap 4 verwenden, müssen Sie nur 2 Divs hinzufügen:

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

Die Klassen: d-table, d-table-cell, w-100, h-100 und align-middle erledigen den Job

Geben Sie die Containerklasse an

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

Geben Sie das Div an, das sich im Container befindet:

align-content: center;

Der gesamte Inhalt dieses Div wird in der Mitte der Seite angezeigt.

Hier ist die Art und Weise, wie ich Inhalte vertikal ausrichte - oben / Mitte / unten mit Bootstrap 3-Zeilen. Bootstrap 3 Spalten mit gleicher Höhe und vertikal ausgerichtet.

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

Hier ist eine JSFiddle- Demo.