Table of Contents

<^>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.