元素水平垂直居中与计算

文本水平垂直居中：

text-align: center; line-height: 100%;

盒子水平垂直居中：

（1 ） display: flex;

            justify-content: center;

            align-items: center;（好用）（弹性盒模型）

（2）  position: absolute;（定位：父相子绝）

           top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

（3） 

.fa {
            width: 300px;
            height: 200px;
            background-color: orangered;
            padding-top: 1px; */
            /* box-sizing: border-box; */
            /* padding-left: calc(150px - 100px);
            padding-top: calc(100px - 50px); */
}
.sn {
            width: 200px;height: 100px;background-color: #000;
            /* margin: 0 auto; */
            /* margin-top: calc(100px - 50px - 1px);
            margin-left: calc(150px - 100px); */

  内边距方法：父盒子高宽一半减子盒子高宽一半

外边距方法：  父盒子高宽一半减子盒子高宽一半减边框    

（4）：平移： transform: translate

计算：

  1. 所有单位（px rem em）都可以用计算属性

        2. 计算属性不能用于媒体查询

        3. 计算操作-加减乘除

            加法/减法运算 空格不能省略，记住+两边要跟单位

           乘法 *两边操作数的单位只能有一个有 （有且仅有一个），空格无所谓

           除法 /前边的操作数跟单位，后面的操作数不能跟单位，空格无所谓

eg：

 .box{width: calc(500px/5);
    height: calc(20px + 200px); 
    border: 1px solid red;   
    }