行级元素居中
- 水平居中:text-align:center;
- 垂直居中:line-height:(xx)px;
line-height的值要和height的值相同才能实现垂直居中
块级元素居中
- 水平居中:
- 设置边距margin:0px auto;
- 将块级元素设为行级元素都进行居中 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%);
}
效果显示:
- 垂直居中
- 设置边距,没有确定高度的可以使用table包裹再使用margin:auto 0px;
- 设置父元素position:relative;top:50%;
子元素:position:relative;top:-50%; - 设置transform:translateY();
- 将元素设置为表格表单元素: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);
}