@jesuisbienbien
Posted
Hi Arjun,
I took some time to look at your codes. Nicely done! I'd suggest you use display: flex to center your component. What I did was: 1- I removed the margin and margin-top in your container 2- I added this in the body:
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Now things should be centered vertically and horizontally.
I also recommend that you add some padding on both sides of the header and paragraph. Also, make sure to wrap the component in <main> tag.
Hope this helps. Happy coding!
Marked as helpful
@vanzasetia
Posted
@jesuisbienbien I don't recommend using height. It causes an issue where on small screen sizes, especially on mobile landscape view, the users won't be able to scroll to see the rest of the page content (the vertical scrollbar won't show up). So, my recommendation is to use min-height instead.
For width: 100vw, there's no need to specify the width to make the card center horizontally. Also, the body element by default has full width and it can cause an issue where there's a horizontal scrollbar showing up. So, I highly suggest don't specify any width to the body element.
@john-mirage
Posted
@jesuisbienbien I agree with @vanzasetia, always use min-height for this use case. Also:
- to center the card you can use margins.
- to let the card breathe add some vertical padding.
.page {
display: flex;
min-height: 100vh;
padding-top: 48px;
padding-bottom: 48px;
}
.card {
margin: auto;
}
@vanzasetia
Posted
@ChaosDynamix I've just tested it myself that setting margin: auto only makes the element horizontally center but, not vertically center. So, my recommendation is to just use flexbox to center the card.
@john-mirage
Posted
@vanzasetia Are you sure you have the parent container as flex ?? My advice was that you dont need the following properties, but offcourse you still need flex display.
justify-content: center;
align-items: center;
flex-direction: column;
i just tested on a pen, and it works.
@vanzasetia
Posted
@ChaosDynamix Thanks for the clarification! Yes, I did the test myself without the display: flex. 😅
@jesuisbienbien
Posted
@vanzasetia Thank you Vanza. I myself didn't know this. I learned something new today thanks to you.
@vanzasetia
Posted
@jesuisbienbien No problem! 👍
