Frontend Mentor | qr-code page / css positioning/relative/absolute/fixed coding challenge solution

Solution retrospective

So really the only thing that I found difficult was the positioning. Im just starting out so I really didn't want to use flex/grid, just to really get the hang of positioning relative/absolute/fixed. To get the div right in the middle of the page was difficult for me I found a solution on stack overflow (https://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen), its the third solution down it work for me but I'm really not sure about the reasoning/why it works. So I would really appreciate the feedback, maybe explain why it works. But this was really great for my first challenge! Thanks! -Michelle

Community feedback

Joao Antonio Mendonca• 70

@mendoncajoao

Posted over 2 years ago

Hi Michelle.

Your result looks good, but the code is a little bit messy.

If you don´t want to use grid or flexbox to center that object, you can use transform and position absolute.

Inside the style file, all you need to center the card is:

body {
    margin: 0;
    padding: 0;
    background: hsl(212, 45%, 89%);
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 470px;
    width: 310px;
    background: white;
    border-radius: 15px;
}

This works as the BODY tag is already doing the work for your .qr-card class.

The way this works is explained very well in this site: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

I hope this helps you.

Keep on coding!