@rcsilva211
Posted
The solution itself is great for this example, but from experience and after you've mentioned you fix to center the container, I can share that display: flex already does that for you :)
Here's my snippet:
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(212, 45%, 89%);
}
When setting the width and height to 100%, the container will occupy the entirety of its parent, in this case being the body. The display: flex will make it can be automatically be arranged keeping in consideration the elements inside; The justify-content: center will make it so it distributes the contents around the container (in this case, will place them to the center); The align-items: center will align all the contents of the flexbox in the vertical axis.
You can check W3Schools for more information about this: CSS Flexbox Container - W3 Schools