A Use Case for CSS calc()

Centering block elements is easy with the calc() property expression.

There will always be 20px margins on the left & right sides of the container below regardless of the size of the viewport.

Resize your browser to see it in action.


width: calc(100% - 40px);
margin: 0 auto;
View the Guide