Build a house painting lab - centering the house

1

Hi there,

I completed this lab successfully recently but I had an issue where I could couldn’t center my main house element in the viewport when I changed the viewport size. I found a solution in an internet article that used the following code, margin-top and bottom and transform property, but I don’t understand it.

How does it achieve centering when you use the -50% values in the translate function? Can anyone clarify this?

#house {
position: relative;
width: 500px;
height: 400px;
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
background-color: #FF9980;
border: 5px solid #B35900;
z-index: 3;
}

Thanks.

2

you should share all the code, not just this bit.

3

This is the only bit of code relevant to my question.

4

you can learn here about the transform property: https://www.freecodecamp.org/learn/responsive-web-design-v9/lecture-working-with-css-transforms-overflow-and-filters/what-is-the-css-transform-property

5

Thanks for pointing me to educational resources. I’m reasonably good at researching the interwebs for information.

When I hit a bump, I then seek clarification from a human being in the sense of an explanation.

I wasn’t going to overwhelm you with code that I didn’t think was relevant. If you honestly think it is, I can post it.

6

question, have you already met relative units in the curriculum?

7

Do you mean em, rem?

8

specifically % in this case

9

I just checked my notes, yes I’m aware of relative versus absolute units.

I’m a bit hazy on what I tried. I think I was using vw/vh which didn’t work, can’t remember if I exhaustively tried other units before finding the translate value which did the trick.

10

The centering is mostly done by the margins: the square is the element, and then the yellow around is the margin.

image
image1021×519 3.58 KB

The margin is half of the viewport, that means that the element is too much to the right and too much down, it’s not in the middle.

So, we translate it, by 50%. Or half its dimensions.

image
image1033×527 1.84 KB