欢迎光临
我们一直在努力

微信小程序绝对布局实现居中效果

当position设为absolute的时候,有三种方式可以实现居中效果
1. 已知view的宽高,通过设置left、top以及margin属性来实现

.testClass{}
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100rpx;
  margin-top: -100rpx;
}
  1. 已知view的宽高,通过设置left、top属性来实现
.testClass{
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  left: calc(50% - 100rpx);
  top: calc(50% - 100rpx);
}
  1. 不知道view的宽高,通过设置left、top以及transform属性来实现
.testClass{
  width: 200rpx;
  height: 200rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate3d(-50%,-50%,0);
}
赞(0) 打赏
未经允许不得转载:半醉人间 » 微信小程序绝对布局实现居中效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏