Something I learned pretty early in my career is that vertically aligning in CSS isn’t as easy as you would think it would be. It’s not as easy as text-align:center. Nope. In the days of IE 7, I relied a heck of a lot on the absolute positioning technique. You know the one:
.test {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
}It was a lot. These days, there are other ways. My fave way is flex box. I feel like it’s way more supported browser wise than grid for now. I’m not going to go over all of the options here. Nope. I wanted to share a link to an article that lays out every option that I know of beautifully:
https://ishadeed.com/article/learn-css-centering/
It’s always nice to have a guide sheet.
Can’t figure out all the options about Flex box? Here’s the article that taught me how to use it with pictures!