Centre image vertical and horizontal

[jhanley87]

Hey all I would like to have a box that is 100% height and an image in the middle (vertical and horizontal) current code i have is:

<Box style={{minHeight:"100%"}}>
--- what goes here? ---
</Box>

example of what I am looking for here:

[nkrantz]

Hey @jhanley87 - welcome to Paste! I'd recommend doing something like this:

<Box display="flex" justifyContent="center" alignItems="center">
  {your img here}
</Box>

In general, it's best to use the properties directly on the Box component rather than putting them in the style tag. You can see the list of Box Props on the docs site.

Let us know how it goes!

[jhanley87]

That is perfect, thanks... also switched to the properties, thanks for the heads up