Skip to Content (Press Enter)
UserImage.jpg
George M
93Views
4Comments
Solved
Auto center container
Question
Development

Hello,

I am working on traditional web and I have an screen in which I have only a container. 

I want to set this container in the center/middle of every screen.

I have specify the align to center but the container remains on the top of the screen and is not set to the middle of it.


Any idea?

0
0
30 Jul 2023
Copy Link
2023-07-25 17-04-53
Mohit Sharma
Solution

Hi @George M

You can achieve it using css below 

.containerCenter {      
position: absolute;      
top: 50%;      
left: 50%;      
transform: translate(-50%, -50%);    
}
Add it here in screen style (Select the Container-> Go to Properties -> Go to Style Classes property -> Go to Style Sheet Editor and paste above css.

Use containerCenter class into Style Classes property.

Your container will be in center of screen always. 

Please check attached .oap file for more help


ContainerCenter.oap
0
0
30 Jul 2023
Copy Link
2025-12-12 06-45-53
Nandhakumar Sureshbabu

Hi @George M,

You can also achieve that by using Flex (Using Flex property will be more precise and preferable)

.container{

display: flex;
align-items: center;
justify-content: center;

}

Hope it helps,
Nandhakumar S.

0
0
31 Jul 2023
Copy Link
2025-12-04 09-01-03
Kiet Phan
Champion

This works well, thank you !

0
0
31 Jul 2023
Copy Link
2024-10-04 07-29-08
Sangam Patel

Use Outsystems predefine classes for this.

Remember this classes add on parent div or container and all child elements should be in enclose container or div

0
0
31 Jul 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.