Vertikales Ausrichtungszentrum in Bootstrap 4

322

Ich versuche, meinen Container mit Bootstrap 4 in der Mitte der Seite zu zentrieren. Bisher war ich nicht erfolgreich. Jede Hilfe wäre dankbar.

Ich habe es bei Codepen.io erstellt, damit ihr damit spielen und mich wissen lassen könnt, was funktioniert, wenn ich Ideen habe ...

Code-Snippet anzeigen

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Erweitern Sie das Snippet

— Kanaan Seaton
quelle

671

Wichtig! Das vertikale Zentrum ist relativ zur Höhe des Elternteils

Wenn das übergeordnete Element des Elements, das Sie zentrieren möchten, keine definierte Höhe hat , funktioniert keine der vertikalen Zentrierungslösungen!

Nun zur vertikalen Zentrierung in Bootstrap 4 ...

Sie können die neuen Dienstprogramme für Flexbox & Größe verwenden , um die containervolle Höhe und display: flex. Diese Optionen erfordern kein zusätzliches CSS (außer dass die Höhe des Containers (dh: HTML, Body) 100% betragen muss ).

Option 1 align-self-centerfür Flexbox-Kind

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Option 2 align-items-centerfür Flexbox-Eltern ( .rowist display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Option 3 justify-content-centerfür Flexbox-Eltern ( .cardist display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Weitere Informationen zur vertikalen Zentrierung von Bootstrap 4

Da Bootstrap 4 nun Flexbox und andere Dienstprogramme bietet , gibt es viele Ansätze für die vertikale Ausrichtung. http://www.codeply.com/go/WG15ZWC4lf

1 - Vertikale Mitte mit automatischen Rändern:

Eine andere Möglichkeit, vertikal zu zentrieren, ist die Verwendung my-auto. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel h-100macht die Zeile die volle Höhe und my-autozentriert die col-sm-12Spalte vertikal .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertikales Zentrum mit Auto Margins Demo

my-auto stellt Ränder auf der vertikalen y-Achse dar und entspricht:

margin-top: auto;
margin-bottom: auto;

2 - Vertikales Zentrum mit Flexbox:

Da Bootstrap 4 .rowjetzt ist display:flex, können Sie es einfach align-self-centerfür jede Spalte verwenden, um es vertikal zu zentrieren ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

oder verwenden Sie align-items-centerinsgesamt .row, um alle col-*in der Reihe vertikal zu zentrieren ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Demo für Spalten mit vertikaler Mitte und unterschiedlicher Höhe

Sehen Sie sich diese Frage / Antwort zur Mitte an, aber behalten Sie die gleiche Höhe bei

3 - Vertikales Zentrum mit Anzeige-Dienstprogrammen:

Bootstrap 4 weist Anzeige utils , die verwendet werden können für display:table, display:table-cell, display:inline, etc .. Diese können mit der verwendet werden , den vertikalen Ausrichtung utils auszurichten inline, inline-Block oder Tabellenzellenelementen.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertikales Zentrum mit Display Utils Demo

Weitere Beispiele
Bild in <div>
vertikaler Mitte in vertikaler Mitte. Zeile in .container
Vertikale Mitte und unten in <div>
Kind mit vertikaler Mitte im übergeordneten Vollbild-Jumbotron in vertikaler Mitte

Wichtig! Habe ich Höhe erwähnt?

Denken Sie daran, dass die vertikale Zentrierung relativ zur Höhe des übergeordneten Elements ist. Wenn Sie sich in den meisten Fällen auf die gesamte Seite konzentrieren möchten, sollte dies Ihr CSS sein ...

body,html {
  height: 100%;
}

Oder verwenden Sie min-height: 100vh( min-vh-100in Bootstrap 4.1+) für das übergeordnete Element / den Container. Wenn Sie ein untergeordnetes Element im übergeordneten Element zentrieren möchten. Der Elternteil muss eine definierte Höhe haben .

Siehe auch:
Vertikale Ausrichtung in Bootstrap 4
Bootstrap 4 Vertikale und horizontale Ausrichtung zentrieren

— Zim
quelle

1

Wenn ich oben auf einer Seite mit einer Navigationsleiste verwende, erhalte ich eine Bildlaufleiste. Ich denke, es fügt 100% Höhe unter der Navigationsleiste hinzu und zentriert sich darüber. Wie kann ich das beheben?

— Newdimension

Ich versuche, mehrere Reihen so auszurichten, dass sie mit der Flexbox zentriert sind. Ich möchte alle Tasten in der Mitte ausrichten. codeply.com/go/5abdqC33cU

— Coder

Ich habe einen Codepen vorbereitet, der derzeit drei Arten der Zentrierung zeigt, basierend auf den hier gezeigten Möglichkeiten: codepen.io/yigith/pen/oNjmGEL

— KodFun

23

Sie können Ihren Container vertikal ausrichten, indem Sie den übergeordneten Container biegen lassen und Folgendes hinzufügen align-items:center:

body {
  display:flex;
  align-items:center;
}

Stift aktualisiert

— Pete
quelle

1

ohhh lol, ich habe den Link in der Beschreibung verpasst ... du hast auch hinzugefügt html, body {height:100%}... das hat es funktioniert! Vielen Dank!

— Kanaan Seaton

1

Ihre Antwort löst das Problem nicht auf die geforderte Weise (mit Bootstrap)

— AlexNikonov

1

Ich stimme Ihnen überhaupt nicht zu, Sie schlagen vor, das Problem zu umgehen, obwohl die Frage lautete, wie es mit Bootstrap-Klassen funktioniert.

— AlexNikonov

@AlexNikonov Nein, wo in der OP-Frage steht, dass sie nur Bootstrap verwenden dürfen - dies ist eine Alternative für andere Personen, die möglicherweise auf dieser Seite landen und versuchen, Dinge ohne die Verwendung von Bootstrap-Klassen vertikal auszurichten. Gehen Sie einfach weiter - hier gibt es viele andere Antworten, die Sie verwenden können. Ich verstehe nicht, warum Sie darüber aufgehängt werden - dies ist ein Forum für alle Ideen, die helfen werden - nicht nur für zielstrebige Antworten. Es sind Benutzer wie Sie, die diese Site durch Herunterstimmen von Antworten verderben, die eine Lösung für das Problem bieten, aber nur, weil Sie es nicht mögen

— Pete

@AlexNikonov auch wenn Sie den ursprünglichen unbearbeiteten Beitrag lesen (als ich meine Antwort hinzufügte), werden Sie auch sehen, dass OP versucht hat, ohne Verwendung von Bootstrap-Klassen zu zentrieren. Zum Zeitpunkt der Antwort war dies also richtig

— Pete

23

Das Befolgen von Bootstrap 4-Klassen hat mir geholfen, dieses Problem zu lösen

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

— Manoj
quelle

1

Das hat mein Div allerdings nicht vertikal zentriert.

— Morgendämmerung

Können Sie bitte Ihren CSS-Code näher erläutern? Teilen Sie einen Ausschnitt davon, ich würde das Problem untersuchen, mit dem Sie konfrontiert sind.

— Manoj

1

es funktionierte mit meinem Text in col div

— Solid Snake

12

Da keines der oben genannten Verfahren für mich funktioniert hat, füge ich eine weitere Antwort hinzu.

Ziel: Vertikales und horizontales Ausrichten eines Divs auf einer Seite mithilfe von Bootstrap 4-Flexbox-Klassen.

Schritt 1: Stellen Sie Ihr äußerstes Div auf eine Höhe von ein 100vh. Dadurch wird die Höhe auf 100% der Veiwport-Höhe eingestellt. Wenn Sie dies nicht tun, funktioniert nichts anderes. Das Festlegen einer Höhe von 100%ist nur relativ zum übergeordneten Element. Wenn also das übergeordnete Element nicht die volle Höhe des Ansichtsfensters aufweist, funktioniert nichts. Im folgenden Beispiel habe ich den Body auf 100vh eingestellt.

Schritt 2: Legen Sie den Container div als Flexbox-Container mit der d-flexKlasse fest.

Schritt 3: Zentrieren Sie div horizontal mit der justify-content-centerKlasse.

Schritt 4: Div vertikal mit dem zentrieren align-items-center

Schritt 5: Seite ausführen, Ihre vertikal und horizontal zentrierte Div anzeigen.

Beachten Sie, dass für das zentrierte Div selbst (das untergeordnete Div) keine spezielle Klasse festgelegt werden muss.

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

— Greg Gum
quelle

Dies funktioniert mit geringfügigen Änderungen

— Ajay Kumar

@ AjayKumar, Möchten Sie Ihre Änderungen teilen?

— Greg Gum

Danke, besonders der 100vhTrick hat mir sehr geholfen. Bootstrap bietet auch die vh-100Klasse dafür.

— Svens

10

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

— Nate Biere
quelle

5

Ich habe alle Antworten hier ausprobiert, aber hier herausgefunden, ist der Unterschied zwischen h-100 und vh-100 Hier ist meine Lösung:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

— AlexNikonov
quelle

4

Verwenden Sie in Bootstrap 4 (Beta) align-middle. Siehe Bootstrap 4-Dokumentation zur vertikalen Ausrichtung :

Ändern Sie die Ausrichtung von Elementen mit den Dienstprogrammen für die vertikale Ausrichtung . Bitte beachten Sie, dass die vertikale Ausrichtung nur Inline- , Inline-Block- , Inline-Tabellen- und Tabellenzellenelemente betrifft .

Wählen Sie aus .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, und je .align-text-topnach Bedarf.

— vallismortis
quelle

4

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

— Tariqul_Islam
quelle

Ihre Bilder haben mich dazu gebracht, dass der Stackoverflow gestartet wurde: D

— AlexNikonov

4

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

In dieser Zeile geschieht die Magie <div class="col-md-6 my-auto">, die my-autoden Inhalt der Spalte zentriert. Dies funktioniert hervorragend in Situationen wie dem obigen Codebeispiel, in denen Sie möglicherweise ein Bild mit variabler Größe haben und den Text in der Spalte in der richtigen Zeile haben müssen.

— rauben
quelle

3

Ich habe es so mit Bootstrap gemacht 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

— Webjay
quelle

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

— Anu
quelle

@AjayKumar Durch Hinzufügen der flex-grow-1Klasse zur Karte wird verhindert, dass sie verkleinert wird.

— Fred

1

Vertikale Ausrichtung Mit diesem Bootstrap 4 Klassen:

Elternteil: d-Tabelle

UND

Kind: D-Table-Cell & Align-Middle & Text-Center

z.B:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

und wenn du willst, dass Eltern Kreis sind:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

Welche zwei benutzerdefinierten CSS-Klassen sind wie folgt:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

Die endgültige Verwendung kann wie folgt sein:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

— Jafar Amini
quelle

0

Platzieren Sie Ihren Inhalt in einem Flexbox-Container, der 100% hoch ist, dh h-100. Richten Sie den Inhalt dann zentral aus, indem Sie die Klasse " Justify-Content-Center" verwenden .

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

— Mwiza
quelle

-1

Verwenden Sie die .my-autoCSS-Klasse (bootsrap4) für Ihre Div

— Preshan Pradeepa
quelle

-2

In Bootstrap 4.1.3:

Dies funktionierte für mich, als ich versuchte, ein Bootstrap-Abzeichen in einem container > row > columnneben einem h1Titel zu zentrieren.

Was funktionierte, war ein einfaches CSS:

.my-valign-center {
  vertical-align: 50%;
}

oder

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

— Phyatt
quelle