-1

I am new on this forum and don't really know how to use it well,

I am also starting learning front end,

For my project i am trying to put an image in the center of the page (vertically and horizontally)

But I only managed to center it horizontally.

Here is my html code :

.fondCarte {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fond {
  width: 400px;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
<body>
  <div class="fondCarte">
    <img src="images/fond.jpg" alt="fond du cv" title="fond du cv" class="fond">
  </div>
</body>

And the result : result

Can someone help me ?

Thanks

Adam
  • 5,495
  • 2
  • 7
  • 24
aab
  • 11
  • 2
  • Your .fondCarte container has height defined by its content -> your image. Simply set the height to something like 100% and it should do the trick. – Dave111 Feb 02 '23 at 11:00
  • @Dave111 thanks for the help. I tryed adding height: 100% in the .fondCarte but it doesn't seem to work – aab Feb 02 '23 at 11:08
  • you would also need to apply it to the `body` and `html` too - see [this answer](https://stackoverflow.com/questions/13609531/how-can-i-make-a-div-100-of-window-height#answer-13609604) – Pete Feb 02 '23 at 11:10

1 Answers1

0

The element is centered in the body element but the body element is only the height of the content. To solve this you need to set the body to 100% of the viewport. We do this by setting the body height to 100vh.

Then, on the body element set the display type to display: grid so you can use the place-items property to center the image. You don't need the .fondCarte container in this case.

Useful reference info:

.fond {
  width: 400px;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}
<body>
  <img src="https://picsum.photos/id/237/200/300" alt="fond du cv" title="fond du cv" class="fond">
</body>
Adam
  • 5,495
  • 2
  • 7
  • 24