Center text vertically with relative height

[_Flaviu]

I need to center a text vertically (and horizontally) along the whole page, and for that I need to setup the height property as relative, respectively whole page. I have tried:

body {
font-family: Arial;
color: #f9f9ff;
background-color:#293138;
}

.center-text {
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
}

Test

How can I achieve this ?

[Richard Deeming]

Using Flexbox:

.center-text {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

Demo[^] CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]

---

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

[Graeme_Grant]

_Flaviu wrote:

How can I achieve this ?

Take you pick: 11 Ways to Center Div or Text in Div in CSS[^]

Graeme

---

"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee

[_Flaviu]

Excellent ! It works. Thanks!

[_Flaviu]

I have read that post, I didn't noticed any solution with relative height, I've read not very carefully though.