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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up