Positioning things in css

HTML-CSS
1

Hello there.
Thats my first post in the forum, so pleas be kind if I post this in the wrong place or something like that :slight_smile:
While doing the CSS-cat-thing I asked myself a question, I cant find. a solution to. It’s about centering things in Css.
In step 18 I had to center the cat head, using:

.cat-head {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Two steps before that I asked myself the question how I could center the cat head and played around a bit. My solution was:

main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

Both solutions do work, but what could be the reasoning behind going either way in future projects?

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').