Submitted over 3 years ago

order summary challenge made by me with html & css

@KarimanMedhat

A solution to the Order summary component challenge

Solution retrospective

I faced a problem with setting the content in the middle of the page so I want to know if there is a way to make it centered?

Code

Please log in to post a comment

Community feedback

Aya Saeed•1,020

@Aya-Saeed261

Posted about 3 years ago

You can use flexbox.

parent-of-the-element-to-be-centered {
display: flex;
justify-content: center; (centers elements horizontally)
align-items: center; (centers elements vertically)
}

Another solution could be by using the position property.

parent-of-the-element-to-be-centered {
position: relative
}
element-to-be-centered{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

If it's still not clear, google how to center an element in css and you'll find many videos and articles explaining this.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord