TranslateX doesn't change the div width

[Lyuu17]

TranslateX doesn't change the div width

[mikke89]

Hey there. I'm trying to understand what you expect to happen in this situation, can you elaborate?

The result looks as I would expect here. Transforms should not affect the width of parent elements, and neither should positioned elements. I believe this behavior is the same as in CSS.

By the way, the idiomatic way in RmlUi to center elements is to use margin: 0 auto. This has the advantage that it is determined at the layout stage, so you get the benefit of pixel-aligned boxes and textures. On the other hand, transforms are done at the rendering stage, with possibly subpixel positioning, which can lead to slightly blurred text and textures. This approach also works better with clipping in our library.

[Lyuu17]

Hey there. I'm trying to understand what you expect to happen in this situation, can you elaborate?

left: -50%; transform: translateX(50%); is supposed to center horizontally the div (at least what it says in here: https://stackoverflow.com/questions/25982135/why-does-left-50-transform-translatex-50-horizontally-center-an-element)

The result looks as I would expect here. Transforms should not affect the width of parent elements, and neither should positioned elements. I believe this behavior is the same as in CSS.

yeah, sorry, i'm bad for titles

By the way, the idiomatic way in RmlUi to center elements is to use margin: 0 auto. This has the advantage that it is determined at the layout stage, so you get the benefit of pixel-aligned boxes and textures. On the other hand, transforms are done at the rendering stage, with possibly subpixel positioning, which can lead to slightly blurred text and textures. This approach also works better with clipping in our library.

The thing is, I don't want to use the whole screen for the document so I wanted to use position: absolute but I guess this is easier and less headache

[mikke89]

By the way, make sure to give body a width. Otherwise, there is nothing to compute percentages relative to, so they will resolve to zero. For me, it works perfectly fine to center it with the way you mention here, after setting width: 100% on the body. If you have any issues, try to test with the latest master branch, as there are several layout changes since RmlUi 5.1.

The thing is, I don't want to use the whole screen for the document so I wanted to use position: absolute but I guess this is easier and less headache

You can use margin: auto with position: absolute to center the element (at least if the sizes are fixed).