Bootstrap pozicování na ose x a y

Zdravím,

nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:
[URL="https://ctrlv.cz/shots/2019/04/17/tYCU.png[/URL]

Dokáže mi někdo poradit? Věřím, že pro profíky to bude hračka, ale já s tím docela bojuji. Několikrát se mi to podařilo, ale zdá se mi ten kód jako prasárna, tak jsem začal nanovo.

Mám to takto:

Kód:

<!-- Header -->
    <section class="hero d-flex">
      <div class="container">
        <div class="row justify-content-center text-center my-auto align-middle">
          <div class="col-md-8">
            <h1>Nadpis H1</h1>
          </div>
        </div> 
      </div>
    </section>

a v css pak u .hero nastavené pouze pozadí a height: 100vh;

Děkuji.

Původně odeslal Lachimista

Zdravím,

nějak se mi stále nedaří najít řešení, jak docílit tohohle výsledku:
[URL="https://ctrlv.cz/shots/2019/04/17/tYCU.png[/URL]

Dokáže mi někdo poradit? Věřím, že pro profíky to bude hračka, ale já s tím docela bojuji. Několikrát se mi to podařilo, ale zdá se mi ten kód jako prasárna, tak jsem začal nanovo.

Mám to takto:

Kód:

<!-- Header -->
    <section class="hero d-flex">
      <div class="container">
        <div class="row justify-content-center text-center my-auto align-middle">
          <div class="col-md-8">
            <h1>Nadpis H1</h1>
          </div>
        </div> 
      </div>
    </section>

a v css pak u .hero nastavené pouze pozadí a height: 100vh;

Děkuji.

Ahoj, hod nejlepe cely kod na codepen. Nebo nekam, kde to bude mozne videt nazivo (a podivat se pres konzolu). Takhle se chyba blbe hleda.

Nebo ted me v rychlosti napadlo:

Kód:

    <section class="hero">
      <div class="container">
        <div class="row justify-content-center flex-column align-items-center h-100">
          <div class="col-md-8">
            <h1>Nadpis H1</h1>
          </div>
        </div> 
      </div>
    </section>

P.S.: pri flex-direction: column jsou osy prohozené, tj. align-items Ti centruje po X, justify-content po Y. Direction column jsem dal proto, pokud bys mel více tagu v <div class="col-md-8">. Jeste bys tam mel mit neco jako offset-2, abys to mel vycentrovane po vodorovne ose.
Class .row v BS4 by mela mit display: flex. U class .hero nech height: 100vh.

Pokud nepomuze, ozvi se.

Nestaci pouzit neco jako tohle: http://jsfiddle.net/Jehuty/wbaeu84z/ ?

Nemel by byt problem si to libovolne upravit (sam BS nepouzim nevim kolik ma 8 sloupcu ve vychozim nastaveni), a netreba pouzivat kvuli tomu monoliticky framework.