Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Absolute-Position Centering inside a Padded Container

Solution: Absolute-Position Centering inside a Padded Container

Let’s center an absolutely positioned element within a padded container using percentage offsets and CSS transforms.

We'll cover the following...

Problem description

An .outer container is relatively positioned with 2rem padding and contains an absolutely positioned .inner box of 100×50px. The ...