Sentrere innhold horisontalt og vertikalt med CSS (Flexbox)

Det finnes ulike måter å sentrere innhold vertikalt på. En ofte brukt metode er å sette position:absolute og transform (for å flytte elementet), med de utfordringer som da kan oppstå (avhengig av hvor du gjør det). Dette kan fungere ok i mange situasjoner, men har du jobbet med absolute-posisjonerte elementer så vet du at det ikke alltid er heldig å bruke (det passer ikke i alle situasjoner).

Flexbox gjør jobben enklere

Med Flexbox blir denne jobben mye enklere.

 <div class="container">
 <div class="info">
 <p>Boksen og teksten er sentrert, både horisontalt og vertikalt!</p>
 </div>
 </div>

 .container{
            background-color: #eee;
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center; /* vertikal sentrering */
            justify-content: center; /* horisontal sentrering */
        }
        .info{
            background-color: #7FD7E5;
            width: 33%;
            height: 200px;
            display: flex;  
            align-items: center; /* vertikal sentrering */
            justify-content: center; /* horisontal sentrering */
        }
        .info p{
             text-align: center;
        }

Resultatet