如何讓div水平垂直居中
方法1：使用定位 + translate（）｜ calc（）
方法2：彈性盒模型
方法3：外邊距自動獲取
方法4：網(wǎng)格
1.transform屬性
translate
定義：移動變換
語法：
transform: translateX();
transform: translateY();
transform: translatez();
transform: translate();
transform: translate3d();
屬性值
- 單位：數(shù)值型是任意長度值：px % em rem vh vw
- translatez(50%) /* 無效 因為div沒有厚度 */
- 數(shù)量：屬性值數(shù)量由函數(shù)確定：1 - 3
- 數(shù)量：多個屬性值薪贫，使用逗號分隔
- 方向：
- X：正值向右 負值向左
- Y：正值向上 負值向下
- Z：正值向前 負值向后
- 等價：translate(200px) 等價于 translateX(200px)
scale()函數(shù)
定義：用于對元素進行縮放變換。
語法
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
參數(shù)值
數(shù)量：由函數(shù)決定：1 - 3個屬性值
類型：沒有單位的數(shù)值跛梗。數(shù)值表示縮放系數(shù)锋勺。
-
范圍：[-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表示角度單位。
- 數(shù)量：由函數(shù)決定斗埂。1 - 4個
- rotate3d(X,Y,Z,deg)：x,y,z分別代表水平符糊、垂直、縱軸的旋轉方向呛凶，取值范圍0 - 5
skew()
定義：用于對元素進行斜切變換
用法：
skew()
skewX()
skewY()
參數(shù)值：
- 參數(shù)是角度值男娄。deg表示角度單位
- 正值：向左
- 負值：向右
- 參數(shù)數(shù)量由函數(shù)決定：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：不設置景深
- 長度值：任何長度值都可以用來設置景深
- 大景深 小變換：在相同的變換參數(shù)下，perspective值越大匀们，變換效果越微弱
- 小景深 大變換：在相同的變換參數(shù)下缴淋，perspective值越小，變換效果越強烈
perspective-origin
定義：設置觀察者的位置泄朴。（設置消失點的位置）
語法
/* One-value syntax */
perspective-origin: x-position;
/* Two-value syntax */
perspective-origin: x-position y-position;
屬性值：
-
數(shù)量：
x-position：表示水平位置
y-position：表示垂直位置
-
屬性值類型
- 長度值：px % em rem vh vw
- 關鍵詞：left right center top bottom
