0
How to vertically center a text?
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
5 Answers
+ 8
Or use the flexbox-layout on the div.
display: flex;
align-items: center;
justify-content: center;
+ 3
Just make line-height same as the div height
e.g. line-height: 20vh;
https://code.sololearn.com/WTU34IS6CycX/?ref=app
+ 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.
+ 2
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%.
+ 2
display: flex;
align-items: center;