点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
大家好！我是/小郑搞码事/的小郑
今天给大家分享一个CSS函数（calc）从认识到如何实现元素居中的事。
没错，今天要说的就是calc函数的功能，先来简单认识一下。
一、认识一下calc函数这个函数出自于CSS3的功能，可以用来动态计算长度值。不要想太复杂，更不需要说的太多，只需要记住下面几点，就足够了熟悉它了：
第一，可以组合使用不同单位
如百分比，PX，rem等等，举个例子：
看了吧，上面代码中DOM的宽度可以使用百分比与PX计算得到，也就是说可以组合不同单位来计算。
第二，使用calc的结果是表达式本身而非结果值
这是什么意思呢？还是以上面这段CSS代码为例子，编译后运行在浏览器中仍然是一个表达式，而不是表达式计算出来的值，这就意味着宽度可以随父元素宽度变化而变化。如下所示：
从上述效果看出，和认识的一样。
第三，兼容性及处理办法
从上图可以看出，兼容性也还是不错的，当然，对于一些不兼容的浏览器我们也会给上一个固定的值。如下所示：
关于这个函数功能认识到这里，它的作用就非常多了，下面使用它来实现元素的垂直居中。看看怎么实现。
二、如何实现垂直居中关键代码如下：
需要注意的是，使用的是top值，而不是margintop，因为margintop拿不到水平的高度值。
如果想简单实现垂直居中，使用calc也是一种办法。
总结文章一开始带大家了解了calc函数特性，这个是最重要的，因为只有你记住，知道了它有哪些特点才会将它应用到所有可能应用的场景。发挥这个属性的作用，实现垂直居中就是其中之一。
,
