Bootstrap jumbotron: Text vertikal und horizontal zentrieren

    Hi,


    ich möchte meinen Text vertikal und horizontal in einem Jumbotron zentrieren. Ich habe es bislang so:


    Code
    1. <div class="jumbotron jumbotron-fluid">
    2. <div class="container">
    3. <span class="display-5 align-self-center">Text in der Mitte.</span>
    4. </div>
    5. </div>


    Code
    1. .jumbotron {
    2. background-image: url("images/baum.jpg");
    3. background-size: cover;
    4. height: 100vh;
    5. color: white;
    6. }


    Ist bestimmt einfacher als gedacht, aber irgendwie bekomme ich es Immer nur horizontal hin, aber nicht vertikal.


    LG und danke

    Flexbox sollte die Lösung sein. Füge mal folgende CSS-Anweisungen der Klasse .jumbotron hinzu:


    Code
    1. display: flex;
    2. justify-content: center;
    3. align-items: center;


    Durch deine Verschachtelung und die Bootstrap-Auswirkungen auf .container musst du noch folgendes CSS hinzufügen:


    Code
    1. .jumbotron>.container {
    2. display: flex;
    3. justify-content: center;
    4. align-items: center;
    5. }