CSS Tip

max-width + centering with one instruction

Set max-width and center your block element with one CSS declaration using margin-inline and max().

Centering and settin a max-width using max()

margin-inline: max(0px,50% - 800px/2);

You can also set a minimum margin for small screen by replacing 0px with any value

margin-inline: max(1rem,50% - 800px/2);

See the Pen margin-inline by Temani Afif (@t_afif) on CodePen.

More CSS Tips