How to vertically center a text?

Question

I am using a div tag i can center a text horizontal, but how can I center a vertically
..
..
https://code.sololearn.com/W7nuyPxvzV8C/?ref=app

Answer 1

Or use the flexbox-layout on the div.
display: flex;
align-items: center;
justify-content: center;

Answer 2

Just make line-height same as the div height
e.g. line-height: 20vh;
https://code.sololearn.com/WTU34IS6CycX/?ref=app

Answer 3

You can also use the grid layout, instead of flexbox, and just write two lines of code.
display: grid;
place-items: center;
You won't need the text-align property anymore, since the place-items property centers the content both horizontally and vertically.

Answer 4

Use a span tag to format the text style (rather than the div style). In the style, use position:relative and specify distance from top (of parent element - the div) around 50%.

Answer 5

display: flex;
align-items: center;