# The `calc()` Function

The `calc()` function allows you to perform calculations to determine CSS property values. It is incredibly useful for mixing different units (e.g., percentages and pixels) that would otherwise be impossible to combine.

## 1. Syntax

`property: calc(expression);`

The expression can use standard arithmetic operators:
*   `+` (Addition)
*   `-` (Subtraction)
*   `*` (Multiplication)
*   `/` (Division)

**Important:** You must put whitespace around the `+` and `-` operators.
*   `calc(50% -8px)` (Invalid)
*   `calc(50% - 8px)` (Valid)

## 2. Mixing Units

The real power of `calc()` is mixing units.

```css
/* A container that is 100% width minus a 20px margin on each side */
.container {
  width: calc(100% - 40px);
  margin: 0 auto;
}
```

## 3. Use Cases

### Centering Elements

```css
.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Move back by half of its own width/height */
  margin-left: -150px; 
  margin-top: -100px;
  width: 300px;
  height: 200px;
}

/* With calc() */
.centered-calc {
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 100px);
}
```

### Responsive Typography

```css
h1 {
  font-size: calc(1.5rem + 2vw);
}
```

[[programming/css/css]]
[[programming/css/units]]