- calc
abbr.计算;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 800px;
height: 800px;
background-color: blue;
position: relative;
}
.son {
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px)
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
这个方法是用定位走50%然后再走自身的一半实现居中,但是这个calc函数直接用一行就能实现计算出最终要走的数值,正常加减乘除都能正常使用
下面是标准语法说明
calc( <calc-sum> )
where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
具体说明 请查看MD
MDN