How to make website component stay at the middle with variety of margin?

Hi, @yanuarcahyatriputra . There are quite a few specifics about your situation that will affect how best to do this. For example, do you want the centered object to remain a fixed size, or do you want it to shrink and grow as the viewport changes? Do you want margins to be fixed, as you’ve mentioned, or can the margins shrink and grow?

Without knowing those things, let me just throw out one option. In this case, I’ve got a grid where I’ve fixed the dimensions of the center cell (800 px wide, 649 tall) and allowed all the margins to shrink and grow (1 fraction for each).

The result is a fixed-size container at the center of my page, which remains in the center as the viewport changes size. (Of course, I use different dimensions for the central cell in different viewports – this is the desktop view I’m showing).

Does this help? Or are you looking for a solution that doesn’t fix the size of the centered object?