Kako vertikalno i horizontalno centrirati element na sredinu ekrana?

Pokazali smo kako na više načina možemo horizontalno centrirati element, a sada je vreme da to znanje iskoristimo, a zatim i proširimo. Na primer: imamo zadatak da element smestimo na sredinu ekrana, a pri tom on treba biti i responsive. 

U ovom primeru prikazaćemo kako to da uradimo flex metodom.

Ovo je HTML deo koda na našoj stranici, imamo roditeljski div element page-container i u njemu blok koji želimo da centriramo:

<div class="page-container">
  <div class="block">
    <h1>Ja sam centriran :)</h1>
  </div>
</div>

Resetovaćemo predefinisane vrednosti margin-a i padding-a za sve elemente. To ćemo uciniti unutar css fajla na sledeći način:

* {
  padding: 0;
  margin: 0;
}

Vertikalno centriranje ćemo postići koristeći CSS, na sledeći način: najpre roditeljskom elementu dodelimo atribut display čiju vrednost postavimo da bude flex, kako bismo dobili responsive element, zatim namestimo da element ima minimalnu visinu 100% sa min-height, ovako smo element proširili preko celog pretrazivača, i ostalo nam je da sve elemente koji se nalaze unutar njega centriramo koristeći align-items: center. 

.page-container {
   background-color: #ffbf00;
   display: flex;
   min-height: 100%; 
   min-height: 100vh; 
   align-items: center;
}
.block {
   background-color: #ffffff;
   padding: 10px;
}

Sada kada smo vertikalno centrirali element, možemo dodati i horizontalno centriranje metodom auto margine. U ovom slučaju će se elemet block nalaziti na sredini ekrana.

.page-container {
   background-color: #ffbf00;
   display: flex;
   min-height: 100%; 
   min-height: 100vh; 
   align-items: center;
}
.block {
   background-color: #ffffff;
   padding: 10px;
   margin: 0px auto; /*za horizontalno centriranje*/
}

Sada možeš da pokreneš program i probaj da promeniš veličinu prozora, sve je responzivno 😉

See the Pen Vertical aligment by Ivana (@ivis27) on CodePen.