401 Stimmen

Wie man einen Container in Bootstrap vertikal zentriert?

Ich suche nach einer Möglichkeit, den container div innerhalb des jumbotron vertikal zu zentrieren und ihn in die Mitte der Seite zu setzen.

Der .jumbotron muss an die volle Höhe und Breite des Bildschirms angepasst werden. Der .container div hat eine Breite von 1025px und sollte in der Mitte der Seite (vertikal zentriert) stehen.

Ich möchte, dass diese Seite den jumbotron an die Höhe und Breite des Bildschirms anpasst und den container vertikal zentriert zum jumbotron. Wie kann ich das erreichen?

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

        Der einfachste und leistungsstärkste Weg

                        WeiterleitenDie Besucher dorthin bringen, wo sie mehr konvertieren.

                        VerfolgenAufrufe, Klicks und Konversionen.

                        ÜberprüfenStändig den Status Ihrer Links überprüfen.

                        ZusammenarbeitenMit Kunden, Partnern und Kollegen.

                        LOSLEGEN
                        KOSTENLOSE VERSION VERFÜGBAR!

8voto

MartinPicker Punkte 189

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

        Header Text
        Some Text

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

2voto

stevec Punkte 25346

Vertikal zentrieren mit Bootstrap 4

Fügen Sie dieser Klasse hinzu: d-flex align-items-center zu dem Element hinzu

Beispiel

Wenn Sie das hätten:

Ändern Sie es zu diesem:

0voto

Ramil Gilfanov Punkte 504

Für bootstrap4 vertikale Zentrierung weniger Elemente

d-flex für Flex-Regeln

flex-column für vertikale Ausrichtung der Elemente

justify-content-center zur Zentrierung

style='height: 300px;' muss gesetzt sein, um Punkte zu definieren, an denen die Mitte berechnet wird, oder die Klasse h-100 verwenden

dann für die horizontale Zentrierung div d-flex justify-content-center und einige Container

also haben wir eine Hierarchie von 3 Tags: div-column -> div-row -> div-container

           Flex-Element

           Flex-Element

0voto

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

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

          Ihre Sachen...

                Mehr Sachen...

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

0voto

Geben Sie der Container-Klasse

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

Geben Sie dem div, das sich innerhalb des Containers befindet, folgendes:

align-content: center;

Der gesamte Inhalt innerhalb dieses divs wird in der Mitte der Seite angezeigt.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X