居中和transform属性

行级元素居中

• 水平居中：text-align：center；
• 垂直居中：line-height：（xx）px；
  line-height的值要和height的值相同才能实现垂直居中

块级元素居中

• 水平居中：
  1. 设置边距margin:0px auto;
  2. 将块级元素设为行级元素都进行居中 display:inline;

ul{
	text-align:center;
}
li{
	display:inline;
}

• 将父元素设置为position:relative;left:50%;子元素：position:relative;left:-50%;

.q{                                    /*父元素*/
    font-size: 50px;
    height: 200px;
    width: 200px;
    background-color:red;
    position: relative;
    left: 50%;
}
.w{
    text-align: center;                /*行内元素水平居中*/
    background-color: yellow;
    position: relative;
    left: -50%;
}

效果显示

• transform:平移旋转，transform:translateX(50%);

.a{
   height: 400px;
   width: 400px;
   background-color: red;
}
.b{
   width: 200px;
   background-color: yellow;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}

效果显示:

• 垂直居中
  1. 设置边距，没有确定高度的可以使用table包裹再使用margin:auto 0px;
  2. 设置父元素position:relative;top:50%;
     子元素：position:relative;top:-50%;
  3. 设置transform:translateY();
  4. 将元素设置为表格表单元素：display:table-cell;vertical-align:middle；注意：vertical只能用来行内元素和表格单元格生效；

  .a{
  height: 400px;
  width: 400px;
  display: table;
  background-color: red;
  }
  .b{
  background-color: yellow;
  display:table-cell;
  vertical-align:middle;
  }
  

  效果显示:
  

使用flex来进行居中

设为Flex布局以后,子元素的float clear和vertical-align属性将失效。

• 水平居中：
  display:flex; justify-content:center;
• 垂直居中：
  flex-direction默认row属性主轴为水平方向，起始端为左端,flex-direction是原则主轴方向，水平方向或者竖直方向。

display:flex;
flex-direction:column;
justify-content:center;

display:flex;
align-items:center;

Transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

部分实例演示

• translate(x,y)

.a{
    background-color: red;
}
.b{
    background-color: yellow;
    transform: translate(20px,20px);
}

• rotate

.a{
    background-color: red;
    transition: 0.3S;
}
.b:hover{
    background-color: yellow;
    transform: rotateX(45deg);
}

• skew

.a{
   background-color: red;
   transition: 0.3S;
   position: relative;
   left: 100PX;
}
.b:hover{
   background-color: yellow;
   transform: skewX(45deg);
}

• scale

.c{
   background-color: red;
   position: relative;
   left: 100PX;
}
.a{
   transition: 0.3S;
   position: relative;
   left: 100PX;
}
.b:hover{
   background-color: yellow;
   transform: scaleX(2);
}