css垂直居中

xiaoxiao2021-02-27  176

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性 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; }

转载请注明原文地址: https://www.6miu.com/read-14122.html

最新回复(0)