Not tested, but top: -15%; doesn't seem right.

Not tested, but top: -15%; doesn't seem right.

align-items: center; vertically centered the box on the screen, but the box is rotated by 45 degrees, and the center of the logo is not the center of the box, so I had to offset it by -15%

tested this in two places. Installation and when you create a field. In both cases you can see that it is not centered

I have tested this item 🔴 unsuccessfully on 173ec04

Yup, thought it wouldn't work. Percentages (top: -15%) should not be used to vertically align something

Tested successfully.

Apply PR.
Run npm i.
Clear browser's cache.
Delete configuration file.
Reinstall.

@Quy Reduce your viewport height and you'll notice spacing at the top:

Open for other suggestions. As seen in the Screenshot, the Box is vertically centered, but the logo is not centered to the box.
The spacing as mentioned by @C-Lodder only happens if the viewport size is reduced to the height of the logo, and its even worse if the offset is removed

212px would be half the height of the box. The Logo doesn't start at exactly half the box, so I guess offsetting it by roughly -150px would do the trick as well

I believe the issue is simply due to the size of the spans, in conjunction with the box dimensions

Now the logo should be centered in the box

I'd suggest reverting your changes and instead adding translate(-25%, -25%) to this transform...

It should save you all the messing with margins.

I'd suggest reverting your changes and instead adding translate(-25%, -25%) to this transform...

joomla-cms/build/media_source/system/scss/joomla-core-loader.scss

Line 27 in fe9210c

transform: rotate(45deg);

It should save you all the messing with margins.

yep, tested it and it works. Should be fine now

I have tested this item ✅ successfully on d75b0d4

Not vertically centered.

I have tested this item 🔴 unsuccessfully on 1e2696b

After applying PR, the logo is not vertically centered.

It is centered for me in Firefox and Chrome on Windows. Please advise your browser.

@ciar4n Can you also look into this? Thanks.

Fixed in PR #28888