wyśrodkowanie tekstu w pionie

Question

<div class="tile_footer" 
style="background:blue; width:100%; height: 36%; position:absolute; top:64%; left:0; right:0; bottom: 0;">

<div style="position:absolute; width:100%; color: white; text-align: center; z-index: 999; font-size: 4vw;">
MILION
</div>

</div>

Mam taki kod wszystko jest ok tylko jak mogę wyśrodkować w pionie napis MILION?

Answer 1

Najprościej byłoby ustawić dla diva w którym jest tekst

line-height:X;

Gdzie X jest pożądaną wysokością kontenera w którym ma się owy napis wyśrodkować. Sprawdź to w działaniu (wypróbuj różne wartości).


Jeśli to nie jest wystarczające rozwiązanie to jeszcze flexbox bardzo dobrze sobie z tym radzi.

Answer 2

Możesz użyć transforma.

div milion {
top: 50%;
transform: translateY(-50%);
}

 

Answer 3

Może spróbuj pokombinować z

padding: 50% 0%;

ewentualnie

display: table-cell;

vertical-align: middle;

Answer 4

display: flex;
justify-content: center;
align-items: center; 

 

Musisz dodać do elementu nadrzędnego :)

Comments

z tego co pamiętam display: flex nie działa na telefonach więc średnie rozwiązanie :P