CSS 中 calc() 函数的好用例？

【问题标题】：Good use cases for the calc() function in CSS?CSS 中 calc() 函数的好用例？
【发布时间】：2016-11-23 15:30:00
【问题描述】：

我一直在玩CSS 中的calc() 函数。混合百分比和绝对值以及调整单位非常有帮助。但是除了一些布局计算，我还没有找到很多用例。

它有很好的浏览器支持：http://caniuse.com/#search=calc

回到我的问题，你有没有找到这个CSS函数的好例子或用例？

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css calc

【解决方案1】：

如果你想让你的 div 在身体的中心

<style>
body{
position:relative;
}
.message{
width:100px;
height:100px;
position:absolute;
left:calc(50% - 50px);
}
</style>


<div class="message">Message</div>

它的设置完全集中在所有设备中。

【讨论】：

但这只是 OP 说他已经知道的另一个布局计算。无论如何，这不是好的编码习惯，因为50px 依赖于100px，并且更改大小将需要在两个地方进行更改。有更好的方法来集中事物。
@user663031 现在可以用 css 变量解决问题