【CSS】calc()方法及水平垂直居中的方法

calc()方法

calc()的运算

1）、使用 “+”、“-”、“*” 和 “/” 运算

2）、可以使用百分比、px、em、rem等单位运算

3）、可以混合使用各种单位进行运算

4）、表达式中有 “+” 和 “-” 时，其前后必须有空格。

5）、表达式中有 “*” 和 “/” 时，其前后可以没有空格，但建议保留

水平垂直居中的方法

第一种：利用position + calc()

    <style>
        .outer {
   
            position: relative;
            
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .inner {
   
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
    
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>

第二种：position + margin：auto；

        .outer