Anyone know how to vertically center text in any devices?

Question

I am making a game and I want my game name to be vertically center in any devices. I tried margin-top: 50%; and vertical-align: middle; but it does not really centerized vertically in any devices. Anyone know how to do it?

Answer 1

this is a very nice question,
coz its a common but complex problem with responsive design

Calviղ nope any div, block/inline-block / inline can be vertically aligned that too in responsive manner.

trick by JonathanP is also very useful, but it requires to know a bit about display:flex, but very Helpful

the main trick in doing vertical align of text is to set

height = line-height

(this is a simplest example for single lines but for multiple lines there is bit more css, or use the css by JonathanP )

https://code.sololearn.com/W8gsn87yasWN/?ref=app

Answer 2

Golden Panda , write your markup like this:
<div id="container">
<div id="name">
Game Name
</div>
</div>
CSS:
#container{
height: 100vh;
display: flex;
align-items: center;
}
That should center it vertically.
Flexbox reference:
https://www.w3schools.com/css/css3_flexbox.asp
Sample code:
https://code.sololearn.com/WKUi5BvV9d14/?ref=app

Answer 3

Calviղ Thank you for the tip!

JonathanP Thank you for that tip too! I already know about flexbox. It's really effective but it's not that smooth when it's blended with animation. Check it on my on-going game Crime Buster.

Morpheus Thank you for the clarification and tip. I already tried the line-height at my Unit Converter code on the navigation bar. It is not really effective when I tried it on other devices. I proved it when I try to use the Responsive tool from the Chrome browser.

Answer 4

Calviղ Thank you for that! Will try it on my game.

Answer 5

you may use flex box...it's a standard nowadays...you can vertically align any element with just one line of css.

Answer 6

vertical align only work in inline element eg. span

https://code.sololearn.com/WP0slXVmHr5C/?ref=app

Answer 7

Golden Panda
You should use height: 100vh; rather than 100% for setting screen height of child elements of body. For immediate childs of body, height:100% means height = total width.

And also try not to use px for spacing, use em would improve responsiveness.