# Place boxes in the middle of flex container

**URL:** <https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436>\
**Category:** Maker\
**Tags:** ignition80, perspective, ignition81\
**Created:** [November 10, 2024, 8:56am UTC](https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436 "2024-11-10T08:56:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [November 10, 2024, 8:56am UTC](https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436/1 "2024-11-10T08:56:37Z")

</div>

Hello,

My page is a flex container, and I want to place 3 boxes in the middle of the page as shown below. If I use margins it works, but if I zoom in, the page looks like crap. I want the "margin" to reduce as I zoom in. How can I do that?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/57fceba478677141226718d46aebcc44d87a6cc9.png)

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 10, 2024, 10:28am UTC](https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436/2 "2024-11-10T10:28:48Z")

</div>

> [@Vidar\_Hetlelid](#):
>
> but if I zoom in ...

How are you zooming in? With the browser's page zoom function (Ctrl-+)? Or do you mean something else?

---

<div class="post-metadata">

**Author:** ![diamond](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@diamond](https://forum.inductiveautomation.com/u/diamond)\
**Post date:** [November 10, 2024, 3:25pm UTC](https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436/3 "2024-11-10T15:25:54Z")

</div>

You can define the margin as a percent% value. Also, you can define the **gap** property to stabish the gap distance between components.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 10, 2024, 9:20pm UTC](https://forum.inductiveautomation.com/t/place-boxes-in-the-middle-of-flex-container/98436/4 "2024-11-10T21:20:55Z")

</div>

I would be setting the flex container's justify to be centred. Don't use margins, use the `style.gap` css prop to set spacing between components

Although I'm not sure how the justify works with zoom.. If it doesn't work, try setting the margin or padding of the flex container to `0 auto`. This will set the top/bottom to 0 and the left/right to resize equally based on the size of the components within the flex