wake-up-neo.com

So zentrieren Sie den Container vertikal in bootstrap

Ich suche nach einer Möglichkeit, das container -Div vertikal in der Mitte des jumbotron auszurichten und es in die Mitte der Seite zu setzen.

Der .jumbotron muss an die volle Höhe und Breite des Bildschirms angepasst werden, deshalb habe ich dieses CSS verwendet.

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

Das .container -Div hat eine Breite von 1025px und sollte sich in der Mitte der Seite befinden (vertikal in der Mitte).

.container{
  width:1025px;
}

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

Mein HTML ist wie

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

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

297
user1012181

Der flexible Kastenweg

Vertikale Ausrichtung ist jetzt sehr einfach durch die Verwendung von Flexible Box-Layout . 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 verwenden ) oder verschiedene Ansätze für IE8/9.

Im Folgenden zeige ich Ihnen, wie Sie dies nur in 3 Zeilen Text tun (unabhängig von der alten flexbox -Syntax) .

Hinweis: Es ist besser, eine zusätzliche Klasse zu verwenden, anstatt _.jumbotron_ zu ändern, um die vertikale Ausrichtung zu erreichen. Ich würde zum Beispiel den Klassennamen _vertical-center_ verwenden.

Beispiel hier (A Spiegeln 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;
}
_

Important notes (In der Demo berücksichtigt) :

  1. Ein Prozentwert der Eigenschaften height oder _min-height_ ist relativ zum Wert height des übergeordneten Elements. Daher sollten Sie den Wert height des übergeordneten Elements explizit 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)Der Flex-Container - _.vertical-center_ in diesem Fall - belegt nicht den verfügbaren Platz im übergeordneten Objekt. Daher müssen wir die Eigenschaft width wie folgt angeben: _width: 100%_.

  4. In einigen der oben erwähnten Webbrowser wird das Flex-Element - in diesem Fall _.container_ - möglicherweise nicht horizontal in der Mitte angezeigt. Es scheint, dass das angewendete links/rechts margin von auto keine Auswirkung auf das Flex Item hat.
    Deshalb müssen wir es mit _box-pack / justify-content_ ausrichten.

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


Der traditionelle Weg für ältere Webbrowser

Dies ist die alte Antwort, die ich zum Zeitpunkt der Beantwortung dieser Frage geschrieben habe. Diese Methode wurde hier behandelt und sollte auch in Internet Explorer 8 und 9 funktionieren. Ich erkläre es kurz:

In einem Inline-Flow kann ein Inline-Level-Element durch die vertical-align: middle -Deklaration 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 Element - in diesem Fall _.vertical-center_ - ein explizites height hat, wäre es möglich, dass ein untergeordnetes Element genau das gleiche height des übergeordneten Elements hat Verschieben Sie die Grundlinie des übergeordneten Elements zum Mittelpunkt des übergeordneten Elements in voller Größe, und richten Sie das gewünschte übergeordnete Element (_.container_) überraschenderweise vertikal zur Mitte aus.

Alles zusammen bringen

Davon abgesehen können wir ein Element mit voller Höhe innerhalb der Pseudoelemente _.vertical-center_ by _::before_ oder _::after_ erstellen und auch den Standardtyp display und das andere untergeordnete Element _.container_ bis _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;
}
_

WORKING DEMO.

Um unerwartete Probleme in besonders kleinen Bildschirmen zu vermeiden, können Sie die Höhe des Pseudoelements auf auto oder _0_ zurücksetzen oder den Typ display bei Bedarf in none ändern.

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

AKTUALISIERTE DEMO

Und noch etwas:

Wenn sich footer/header-Abschnitte um den Container befinden, ist es besser, die Elemente richtig (relative, absolute?) zu positionieren und einen höheren _z-index_-Wert hinzuzufügen (zur Sicherheit) um sie immer auf dem neusten Stand zu halten.

550
Hashem Qolami

Update 2018

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

Verwenden Sie einfach die Dienstprogrammklassen d-flex und align-items-center.

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

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

72
Zim

fügen Sie Bootstrap.css hinzu und fügen Sie diese dann zu Ihrer 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>
50
Rontuku

In Bootstrap 4:

um das Kind horizontal zu zentrieren , verwenden Sie die Bootstrap-4-Klasse:

justify-content-center

um das untergeordnete Element vertikal zu zentrieren, verwenden Sie die Bootstrap-4-Klasse:

 align-items-center

aber denken Sie daran, vergessen Sie nicht, die d-flex Klasse zu verwenden. Dies ist ein Bootstrap-4-Dienstprogramm Klasse, wie so

<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ß, es ist nicht die direkte Antwort auf diese Frage, aber es kann jemandem helfen

27
user9299363

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 this Fiddle !

8
John Slegers

Getestet in IE, Firfox und Chrome.

CSS:

    .parent-container {
        position: relative;
        height:100%;
        width: 100%;
    }

    .child-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

HTML:

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

7
MartinPicker

für bootstrap4 vertikale Mitte weniger Elemente

d-flex für Flexregeln

Flexspalte für vertikale Richtung auf Gegenständen

Justify-Content-Center für die Zentrierung

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

dann für horizontale Mitte div d-flex Rechtfertigen-Inhalt-Mitte und einige Container

so haben wir hierarhy von 3 tag: 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> 
1
Ramil Gilfanov

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