Hello,
You've done a great job and it's a very impressive design you made!
Please let me just add another option to center the wrapper.
I downloaded your code and found that you centered it with position: absolute
.
The inset: 0
means left: 0; right: 0; top: 0; bottom: 0
. That would not center the wrapper in its own, but it does when it combines with margin: auto
. You will find the wrapper will not sit on the center if you remove either of them. In summary, position: absolute
, inset: 0
, and margin: auto
are making the wrapper sit on the center now.
That's fine, but you can use a simpler way to center it: flex
. You can center the wrapper with flexbox, without using positioning.
.container {
display: flex;
align-items: center;
/* position: relative; */
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0; */
margin: auto;
transition: 200ms ease;
}
Now the .container
is a flex-container for a single flex-item: .wrapper
. flex-direction
is row
, the default value, and align-items: center
makes the wrapper sit at the middle on the vertical dimension. (so you will need height: 100vh
for this.) In addition, margin: auto
in the .wrapper
style makes the wrapper sit at the center on the horizontal dimension. If you like, you can add justify-content: center
in the .container
style and remove margin: auto
in the .wrapper
style, which will create the same result.
.container {
display: flex;
align-items: center;
justify-content: center;
/* position: relative; */
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
/* position: absolute; */
/* inset: 0; */
/* margin: auto; */
transition: 200ms ease;
}
I hope this helps a little bit.