垂直居中是布局中十分常见的效果之一,为实现良好的兼容性
PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。
有了css3,针对移动端的垂直居中就更加多样化。
.Vertical_center span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
说明:通过margin:auto和top,left,right,bottom都设置为0实现居中
不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。
.Vertical_center span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
说明:
transform: none|transform-functions;
该属性允许我们对元素进行旋转、缩放、移动或倾斜
translate(x,y) 定义 2D 转换(平移)
scale(x,y) 定义 2D 缩放
rotate(angle) 定义2D旋转
js语法
object.style.transform="rotate(7deg)"
css3居中显示
.f_item{
display: flex;
justify-content:center;
align-items:center;
}