相对父view 是  top: 90px; 相对其他组件     margin-top: 50px;

.submitBtn{
  position: absolute;

  top: 50px;
  top: 10%;

  left: 26px;
  right: 26px;
  bottom:50px;



 height: 50px;
height: 15%;


width: 25%;
width: 50px;

}

微信小程序组件居中：

align-items: center;（水平）
justify-content: center;（垂直）
我找的资料都是组件在外层先加个view，然后才能居中，尴尬😓有时间再找找。

屏幕快照 2019-06-20 上午9.29.59.png

.wxml

<view id="bgView">

<text id = "laohu">湖面的老虎</text>
<text id = "xiaohu">湖面的老虎rrrrrrrrrrrr</text>
</view>

.wxss

#bgView{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
#laohu{
  position:absolute;
  top: 45px;
  text-align: center;
}
#xiaohu{
  position:absolute;
  top: 90px;
  text-align: center;
  left: 10px;
}

二、position(位置)

属性 说明

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

inherit 规定应该从父元素继承 position 属性的值

常用：fixed 相对浏览器 ，absolute相对view所在的父view

<view class="meimei"><image class='btnYa' src="/imgs/myWalletImg.png" mode='scaleToFill'></image><view class="meiya" >  
</view>
</view>

.meimei{
  position: absolute;
  width: 150px;
  height: 160px;
  top: 100px;
  background-color: gray;
}
.btnYa{
  position: absolute;
  top: 0px;
  left: 26px;
  right: 26px;
  height: 50px;
  
}
.meiya{
  position: absolute;
  left: 26px;
  right: 26px;
  height: 60px;
  bottom: 0px;
  background-color: red;
}

屏幕快照 2019-06-20 下午6.31.33.png

一样的代码逻辑是行的，imag就用不了。
解决：1.固定宽度就行。
2.按比例设置 width: 70%;

屏幕快照 2019-06-20 下午6.39.02.png

三。微信小程序九宫格

https://blog.csdn.net/m0_38082783/article/details/87878470

四 。margin-left

这个是相对上一个组件的距离 ，但是我试了没用😅。margin-top这个有用。先不管了。

小程序似乎不推荐这样用。推荐flex。

五 flex

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

6 padding

http://www.w3school.com.cn/cssref/pr_padding.asp