# Studio: UI

**URL:** <https://forum.8thwall.com/t/studio-ui/3518>\
**Category:** Technical Support\
**Created:** [November 8, 2024, 5:14pm UTC](https://forum.8thwall.com/t/studio-ui/3518 "2024-11-08T17:14:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Camilo\_MEDINA](https://avatars.discourse-cdn.com/v4/letter/c/9dc877/32.png) [@Camilo\_MEDINA](https://forum.8thwall.com/u/Camilo_MEDINA)\
**Post date:** [November 8, 2024, 5:14pm UTC](https://forum.8thwall.com/t/studio-ui/3518/1 "2024-11-08T17:14:03Z")

</div>

Hello,

I am trying to use the UI Element from studio to not make it in js, but the documentation is not clear, and I have not been able to center this button,

How can I do it?

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/f/fd2771fd10bbe78a91f500a3586cc47497f58638.jpeg)

Thank you

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [November 8, 2024, 6:39pm UTC](https://forum.8thwall.com/t/studio-ui/3518/2 "2024-11-08T18:39:24Z")

</div>

Have the overlay be a parent element to other children UI elements. Then you can use “flex” and “align items center” to center it using the properties.

We have a guide on UI coming soon!

---

<div class="post-metadata">

**Author:** ![Camilo\_MEDINA](https://avatars.discourse-cdn.com/v4/letter/c/9dc877/32.png) [@Camilo\_MEDINA](https://forum.8thwall.com/u/Camilo_MEDINA)\
**Post date:** [November 8, 2024, 7:12pm UTC](https://forum.8thwall.com/t/studio-ui/3518/3 "2024-11-08T19:12:13Z")

</div>

Thank you for your response, but I’m not getting the expected result. Could you explain what ‘flex’ is? I’m also not seeing this element

Parent:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/c/cc908a7d9dc67a736fd84d41f0fad66fa4224589.png)  
Child:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/7/7f5328b56fdd7574b1bddfd8371e8eb273a15d5a.png)

Result:

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9381d2cfde36a757ededc2ff6d0cc3665d77f22f.png)

---

<div class="post-metadata">

**Author:** ![Lerma\_DX](https://avatars.discourse-cdn.com/v4/letter/l/e5b9ba/32.png) [@Lerma\_DX](https://forum.8thwall.com/u/Lerma_DX)\
**Post date:** [May 12, 2025, 11:30pm UTC](https://forum.8thwall.com/t/studio-ui/3518/4 "2025-05-12T23:30:35Z")

</div>

A UI Guide is deeply needed as the docs are pretty confusing and it seems like they are styling properties that are only accessible through the api and not visual editor. I’m also really curious about animations?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 13, 2025, 3:43pm UTC](https://forum.8thwall.com/t/studio-ui/3518/5 "2025-05-13T15:43:19Z")

</div>

I’ll look into getting this done, thanks for the feedback!