paint-brush
Vertically Centering Text and HTML Elements With CSSby@smpnjn
300 reads
300 reads

Vertically Centering Text and HTML Elements With CSS

by Johnny Simpson3mJuly 6th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Vertically centering something in CSS is not as easy as you'd think, and until we got tools like flexbox, it was really hard. Centering an item in the middle of the screen with CSS is really easy with flexbox. If we want it to be both centered vertically, and also centered horizontally, then we would update our `container` CSS to look like this:```csscontainer { display: flex; align-items: center;   justify-content: center.

Company Mentioned

Mention Thumbnail
featured image - Vertically Centering Text and HTML Elements With CSS
Johnny Simpson HackerNoon profile picture
Johnny Simpson

Johnny Simpson

@smpnjn

Product, Engineering, Web

About @smpnjn
LEARN MORE ABOUT @SMPNJN'S
EXPERTISE AND PLACE ON THE INTERNET.
L O A D I N G
. . . comments & more!

About Author

Johnny Simpson HackerNoon profile picture
Johnny Simpson@smpnjn
Product, Engineering, Web

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here