> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/function-calc-css-ok.md).

# function calc css (ok)

```
$offset-padding-item: 40%;
```

```
div {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% + #{$offset-padding-item} * 2);
      height: 100%;
      opacity: .5;
    }
```