CSS3：calc( )属性--可以计算的属性

Posted 2021-09-16 yujian

垂直居中之 calc()计算的方法：

**语法：
calc() = calc(四则运算)
说明：
（1）calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
（2）任何长度值都可以使用calc()函数进行计算；
（3）calc()函数支持 “+”, “-“, “*”, “/” 运算；
（4）calc()函数使用标准的数学运算优先级规则；
（5）但需要注意的是 + - 必须用空格隔开;**~~~~

   .main{
            height: 100px;
            width: 400px;
            background: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            left: calc(50% - 200px);
            top: calc(50% - 50px);
        }
 <div class="main">main</div>