Vertically Centering Elements

HTML-CSS
1

After scouring the internet, it seems like there is no one-beats-all method for vertically centering my HTML elements with CSS. In this project, I have a box within a box that I want to be vertically centered so that it sits perfectly in the middle. And I also am trying to vertically center the box containing the box so that it is in the middle of grid are I created. Any tips or suggestions?

My project: https://codepen.io/nomadfox/pen/JwRPqE?editors=0110

2

Figured it out!

position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

1 Like