Problem: Absolute-Position Centering inside a Padded Container
Problem description
An .outer container is relatively positioned with 2rem padding and contains an absolutely positioned .inner box of 100×50px. The task is to center the .inner box within the content box of the .outer, ignoring padding.
Goal
Place the .inner box at the geometric center of .outer’s content area regardless of padding.
Constraints
Use only CSS; you cannot alter the HTML or add scripts.
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: Absolute-Position Centering inside a Padded Container
Problem description
An .outer container is relatively positioned with 2rem padding and contains an absolutely positioned .inner box of 100×50px. The task is to center the .inner box within the content box of the .outer, ignoring padding.
Goal
Place the .inner box at the geometric center of .outer’s content area regardless of padding.
Constraints
Use only CSS; you cannot alter the HTML or add scripts.
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.