@danielmrz-dev
Posted
Hello, @chemsodev!
Your project looks very nice!
You did a great job centering your card using position.
There's another very good way, in case you wanna practice more:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
This will place your card in the middle of the page with no need for margins or paddings.
I use both your way and mine, depending on the project. They are both correct 😊
I hope it helps!
Marked as helpful
@chemsodev
Posted
hello sir @danielmrz-dev , thank you so much for your advice I think it's pretty nice way to center the card cuz it's looks simple ,I hope U will see my other solutions when I post them . I have a question when I use your way the card is goes in the center but it's still in the left ,maybe I need to add something? cuz I think it's only control the height ,help me please.
@danielmrz-dev
Posted
Of course!
I'm gonna keep track of your projects so I can help you! 😊
About centering the card, this technique I gave you can center the card both vertically and horizontally. I checked your code and applied what I told you and it worked just fine.
In order to work properly, you can't use position and margins simultaneously. Give it another try, I ensure you it works!
@chemsodev
Marked as helpful
@chemsodev
Posted
thank you so much sir @danielmrz-dev , I tried once again and it works like magic ,it's much better than the way that I used , and in only 3 lines. I really appreciate your advices , I have another question: is it okay to use this method in bigger websites that are more complicated I mean the "display: flex;" in the body
@danielmrz-dev
Posted
This method is nice for small projects with centered elements. In bigger websites, it's not that simple, because many other elements are involved. What I mean is each case is different and we choose the best option considering what the project requires.
@chemsodev
Marked as helpful
@chemsodev
Posted
I got it , thanks again sir. @danielmrz-dev
