微信小程序之绝对定位之居中微调

作者: Jure_joe | 来源:发表于2019-08-13 16:40 被阅读0次

微信小程序之绝对定位之居中微调
微信小程序之API篇——豆瓣图书搜索（十二）
微信小程序之基础组件篇——媒体组件（十一）
微信小程序之拓展篇——weui-wxss（十三）
微信小程序之注册篇（二）
微信小程序之入门篇（一）
微信小程序之基础组件篇——视图容器（七）
微信小程序之基础组件篇——基础内容（八）
微信小程序之触控事件（六）
微信小程序之基础组件篇——导航组件（十）

1、绝对定位（absolute）：该定位方式指相对于父级元素进行定位；区别于相对定位（relative）,该定位方式是相对于自己。如若不在父级元素中指定position:relative,那么对某一元素使用绝对定位后原来的位置仍保留，其同级元素的后一个不会占用该元素留下的位置（即该位置留白）
2、如若存在一个父级元素view,要求其中的一个子元素image居中显示，可以使用绝对定位进行居中微调,如下图（左侧蓝色为背景图片，其上白色的图标为阿里云图标，不是图片格式）：

1565684835(1).jpg

3、微调

/*父级元素*/
.icon{
  position:relative
}
.imgConsult {
  width:75rpx;
  height:75rpx;
  position:absolute;
  top:50%;
  left:50%;
  /*微调*/
  margin-top:-12%;
  margin-left:-12%;
}

微信小程序之绝对定位之居中微调
1、绝对定位（absolute）：该定位方式指相对于父级元素进行定位；区别于相对定位（relative）,该定位方...
微信小程序之API篇——豆瓣图书搜索（十二）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之基础组件篇——媒体组件（十一）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之拓展篇——weui-wxss（十三）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之注册篇（二）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之入门篇（一）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之基础组件篇——视图容器（七）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之基础组件篇——基础内容（八）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之触控事件（六）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...
微信小程序之基础组件篇——导航组件（十）
微信小程序之入门篇（一）微信小程序之注册篇（二）微信小程序之开发初体验（三）——开发工具使用和目录结构微信小程序之...