@aymaneatigui
@iamkayleb
Submitted
I found it hard to center the component on desktop screen without using the following CSS properties; position, top, left and transform. These properties made my work harder when making it responsive on smaller screens so I just omitted them. Please, let me know how i can achieve centering the component without using those aforementioned properties.
@aymaneatigui
Posted
Hey Caleb,
Congratulations on successfully completing the challenge! When it comes to centering elements in CSS, there are various techniques available.
One method I highly recommend is using Flexbox.
By implementing the following code in your stylesheet, you can achieve both horizontal and vertical centering:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
For more complex layouts, the Grid system is another excellent option. Here's an example of how to center content within a Grid:
body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
min-height: 100vh;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
Lastly, you can also use the margin: auto; property to center content, but please note that this method is primarily suitable for horizontal centering.
I hope this information proves helpful for your future projects. If you have any further questions or need assistance with anything else, feel free to ask.
You can check my code to have more ideas : Github
Marked as helpful