Is there a way to make CSS calc() never be a negative value?

Question

I have the following code which works great with centering my content until the vh is less then 650px. I was wondering if there was a way to make this value never go below 0 only using CSS calc.

.my-margin-top {
    margin-top: calc(50vh - 325px);
}

Answer 1

In the latest browser versions there is max() function in CSS:

.my-margin-top {
    margin-top: max(50vh - 325px, 0);
}

Browser compatibility: Firefox 75+, Chrome/Edge: 79+, Safari: 11.1+

There is also clamp(): clamp(0, 50vh - 325px, 100vh), where 100vh is an upper bound. But this is not in Safari yet, although can be simulated with min() and max() calls.