CSS_div居中_transform属性简介

transform属性实现 div居中

transform的英汉释义：改变；使...变形；转换；

此页重点说明div居中的实现解释，捎带transform属性简介，值详情见参考网页；

参考：MDN web docs & W3school & 菜鸟教程 & CSDN；

对元素图形进行变换操作：旋转，移动，缩放，倾斜。

　　注意：只能转换“盒模型元素”

transform:

　　none

　　旋转：rotate

　　移动：translate

　　　　移动分为三种情况：

　　　　　　1. 水平方向移动：translate( X, Y )

　　　　　　2. 垂直方向移动：translate( X )

　　　　　　3. 水平垂直同时移动：translate( Y )

　　　　其中：X水平轴（默认左起向右），Y垂直轴（默认上起向下）；

　　　　参数值：可为负值，0，正值；

　　　　例题：div居中

　　　　　　css{

　　　　　　　　position:absolute;

　　　　　　　　top:50%;

　　　　　　　　left:50%;　　注：此百分比是基于页面大小

　　　　　　　　　　相对页面定位

　　　　　　　　　　效果如下：

　　　　　　　　

　　　　　　　　transform:translate(-50%,-50%);　　注：此百分比是基于元素大小

　　　　　　　　　　相对元素旧位置：向左上移动

　　　　　　　　　　移动数值：半个元素大小

　　　　　　　　　　效果如下：

　　　　　　　　

　　缩放：scale

　　扭曲：skew

　　矩阵：matrix