如何让div水平垂直居中
方法1：使用定位 + translate（）｜ calc（）
方法2：弹性盒模型
方法3：外边距自动获取
方法4：网格
1.transform属性
translate
定义：移动变换
语法：
transform: translateX();
transform: translateY();
transform: translatez();
transform: translate();
transform: translate3d();
属性值
- 单位：数值型是任意长度值：px % em rem vh vw
- translatez(50%) /* 无效 因为div没有厚度 */
- 数量：属性值数量由函数确定：1 - 3
- 数量：多个属性值，使用逗号分隔
- 方向：
- X：正值向右 负值向左
- Y：正值向上 负值向下
- Z：正值向前 负值向后
- 等价：translate(200px) 等价于 translateX(200px)
scale()函数
定义：用于对元素进行缩放变换。
语法
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
参数值
数量：由函数决定：1 - 3个属性值
类型：没有单位的数值。数值表示缩放系数。
-
范围：[-1,1]和[1,正无穷]
- 1：无效果
- 0.5：表示缩小一半
- -0.5：等于0.5
- 2：表示放大2倍
等价：scale(2) 效果等同 scaleX(2)
rotate()
定义：用于对元素进行旋转变换
语法
rotate()
rotate3d(1，1，1，45deg)
rotateX()
rotateY()
rotateZ()
属性值
- 等价：rotate(30deg) 效果等同 rotateX(30deg)
- 30deg：属性值是角度值。deg表示角度单位。
- 数量：由函数决定。1 - 4个
- rotate3d(X,Y,Z,deg)：x,y,z分别代表水平、垂直、纵轴的旋转方向，取值范围0 - 5
skew()
定义：用于对元素进行斜切变换
用法：
skew()
skewX()
skewY()
参数值：
- 参数是角度值。deg表示角度单位
- 正值：向左
- 负值：向右
- 参数数量由函数决定：1 - 2
transform-origin
定义：用于设置元素的变换中心点。
语法
transform-origin: x y z;
transform-origin x y;
transform-origin: x;
属性值
默认值：transform-origin： center center；
x：任意长度值 ｜ 关键词。表示x轴的偏移。
y：任意长度值 ｜ 关键词。表示y轴的偏移。
z：任意长度值 ｜ 关键词。表示z轴的偏移。
两个值
- 如果只设一个值，那么第二个值默认center
transform-style
定义：用于设置父元素是2d还是3d模式。
用法
transform-style：flat;
transform-style: preverse-3d
属性值
- flat：开启2d平面空间
- preverse-3d：开启3d立体空间
perspective
定义：是否开启透视｜是否设置景深。｜解释：perspective指定的是z轴原点到屏幕的距离。
语法
perspective：none
perspective：长度值
属性值
- none：不设置景深
- 长度值：任何长度值都可以用来设置景深
- 大景深 小变换：在相同的变换参数下，perspective值越大，变换效果越微弱
- 小景深 大变换：在相同的变换参数下，perspective值越小，变换效果越强烈
perspective-origin
定义：设置观察者的位置。（设置消失点的位置）
语法
/* One-value syntax */
perspective-origin: x-position;
/* Two-value syntax */
perspective-origin: x-position y-position;
属性值：
-
数量：
x-position：表示水平位置
y-position：表示垂直位置
-
属性值类型
- 长度值：px % em rem vh vw
- 关键词：left right center top bottom
