小程序将元素定位底部并居中，js轻松解决；获取组件元素的高度、宽度。

对于css的使用不太熟悉的同学，想要将元素定位到底部很简单，但是使用了绝对定位或者固定定位之后，再想把元素水平居中就有点不知所措了。

不过这都不要紧，我们可以通过js轻松将元素进行居中。

怎样让其水平居中呢？我这里使用的是margin-left，这时候你可能会觉得数据不准啊。有可能实际并不居中。

没关系，我们通过计算得到需要的margin-left的值就OK啦。

解决思路：首先获取元素所占宽度，然后用满屏宽度减去元素宽度再除以2，就得到合适的margin-left的值了。

现在首要的任务就是获取元素的宽度。

我们首先通过SelectorQuery 返回一个 SelectorQuery 对象实例。然后在通过实例选择元素属性id,调用boundingClientRect()获取到一个参数，这个参数里面包含此元素的高度、宽度等信息。

具体代码：

var info = wx.createSelectorQuery()
    var left = this.data.left
      info.select('#yuansu').boundingClientRect(res=>{
    
    
          left = (750-res.width*2)/2;
          this.setData({
    
    left:left})
      }).exec()

上面需要解释的是获取到的高度、宽度单位都是px，1px = 2rpx 。。满屏宽为750rpx,所以 left 就等于750rpx减去宽度的二倍，然后再除以2，就得到了margin-left的rpx值。

这里需要注意的是：在使用boundingClientRect方法时需要用箭头函数，否则在此方法内无法使用this.setData方法。

上面得到的 left 值就是需要给的margin-left的值。

轻松让元素居中。