Centre UI Document on screen

Unity Engine
,
1

Hi all,

I’ve created a fixed size UI Document which is square at 1080 x 1080px. I simply want to show this centred on my game screen. I need it to scale so that it fills the screen, so in my Panel Settings I’ve selected “Scale with Screen Size” and Scale Mode Parameters are “Match Width or Height” with the Match slider all the way to the right.

The size of the UI Document is perfect - it fills the height of the screen regardless of the screen size or aspect, but it’s fixed to the left-hand edge. How can I centre it? I’ve tried putting it inside another element but it refuses to adopt any layout I try and force on it.

Thanks so much for any help!

:o)

2

Just make the visual element you want centered the child of one that fills the entire screen (so flex-grow = 1). Then just align it to the center with USS styles.

3

Thanks @spiney199 , but I want my entire UI Document square - there is no parent element that fills the screen. Not in the uxml, at least.

Anyway, I think I managed to resolve this on my own:

I have a VisualElement that contains all my other child elements and that container is 1080px × 1080px. I simply used an old CSS trick for centring elements which is to give that element the following USS:

position: relative;
left: 50%;
margin-left: -540px;

which effectively places the left-hand edge of the element at the mid-point of the container and then “pulls it back” by half its own width. And it’s working perfectly - my UI elements container fills the screen vertically and is centred horizontally :wink:

4

Then you could just add one?

Pretty much all my UI Documents have a root visual element that fills the entire screen, with some styling to position the ‘actual’ UI.

Doing so in this instance you would just have to change ‘align-items’ to middle centre for said root element.

5

@spiney199 unfortunately that doesn’t work in my case. I’m creating a 2D game which is fully responsive and will fit any screen size. If I have my UI Document fill the screen with 100% width and height, then I can’t create a square element that fills the height of the screen inside of that to place my actual UI. With UI Toolkit not supporting the CSS aspect-ratio attribute or vw or vh units, at least.

I actually did write my own C# media queries add-on and even implemented custom USS properties to add a --aspect-ratio attribute but my client has since told me they don’t want any C# used for layout - I can only use what UI Toolkit will do out-of-the-box.

1 Like
6

Uh, yes you can…

Just style the square element with height 100%. Then Bob’s your uncle.

7

@spiney199 and what width will it have? 100vh is not possible.