Best way to center a block horizontally and vertically

[oak prairie]

Hello, I am looking for some time for the most optimized way to center a block horizontally and vertically. Do you have any suggestions?

[ancient skiff]

Use Center component

[oak prairie]

Yes but when I put 100% in the height it does not work

[ancient skiff]

Set it to the height of target element

[green valve]

Using style={{ width: "100%", height: "100%" }} works fine for me. If the parent element does not have a specified height in px or em or something (in other words, if it's set to auto), using <Center> will not work in the vertical direction.

[oak prairie]

<div style={{ height: "100%" }}>
  <Center style={{ width: "100%", height: "100%" }}>
    Bonjour
  </Center>
</div>

@green valve I tried this but it still doesn't work

[green valve]

@oak prairie If the parent also uses 100% then its parent must have a specified value all the way up until it hits the document element or something with a concrete value in px/em/etc.
First try changing the div height to something with a unit like 200px and see if it works.

[oak prairie]

Yes, it works if I put 100px but the problem is that I want the element to be centered perfectly in the middle of the screen. It works using custom css but I would like to do this with Mantine.

[green valve]

Then use 100vh

[oak prairie]

Oh my goodness, thank you so much!!! I'm bad at frontend development. Thanks again!

[green valve]

No worries 🙂 . The best thing to do when you're confused why something isn't working is to open up the elements tab and see what's up with the css. It's also a great way to learn how other front-end developers make stuff on their sites, and you can steal their ideas 🦝 💰