Problem: Center a Rotated Element
Problem description
A .wrapper container sized 200px by 200px contains a child .rotated element sized 50px by 50px, rotated 45°. The task is to align the rotated element’s visual center with the center of the parent, without altering HTML or using JavaScript.
Goal
Position the rotated square so that its geometric (visual) center coincides with the container’s center point.
Constraints
Only CSS may be applied to existing elements; modifications to HTML and JavaScript are not permitted.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Center a Rotated Element
Problem description
A .wrapper container sized 200px by 200px contains a child .rotated element sized 50px by 50px, rotated 45°. The task is to align the rotated element’s visual center with the center of the parent, without altering HTML or using JavaScript.
Goal
Position the rotated square so that its geometric (visual) center coincides with the container’s center point.
Constraints
Only CSS may be applied to existing elements; modifications to HTML and JavaScript are not permitted.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.