The CSS calc() function

Calc() is a CSS function that lets you calculate values right in your CSS. For example:

.pirate {
  position: absolute;
  /* lets have the pirate 20px from the left */
  left: calc(50px - 30px);
}

At first glance you might think Why the heck would I care? I can just set it to 20px. Well things get interesting when you realize that you can mix and match the units:

left: calc(1.5em - 8px);

And things get even more interesting when you mix in percentage values. The following sets to width of the selected element to 80px less than 100%:

width: calc(100% - 80px);

Make sure to use spaces around the operand. For example: v1 + v2, not v1 +v2 or v1+v2.

You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …)

Calc() is very useful for things like vertical centering if you know the height of the element you want to center. You just add a margin-top to the element of 50% of the viewport height minus half the height of the element. Let’s say our element is 100px tall:

.my-element {
  display:block;
  margin-left:auto;
  margin-right:auto;
  /* 50vh = 50% viewport height */
  margin-top: calc( 50vh - 50px );
  width: 200px;
  height: 50px;
}

Browser Support

Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.