微信小程序实现元素的垂直居中

我们在进行日常前端页面的开发时，让元素垂直居中的操作数不胜数，初学者可能不太了解如何操作，方法很多，我说一种我用的比较多的。
我们以一个块元素view为例，首先我们写一个宽高分别为300rpx的view，加一个背景色方便我们直观感受效果。

这是默认的效果，view会在左上角。
现在我们的任务是让这个view垂直居中。
垂直居中分为两步，我们先实现水平居中。
因为view是块元素，我们只需要设置margin值即可

<view class="test">

</view>

.test {
  width: 300rpx;
  height: 300rpx;
  background-color: red;
  margin:0 auto
}

效果如下：

水平居中已经完成，下面我们实现垂直居中。
在CSS中top属性可以使元素向下偏移，但是position默认的值是static，静止的，不可移动。常用的position值有relative,absolute,fixed，我们设置为relative。因为relative是不会使元素脱离文档流，而absolute和fixed则会，所以我们用relative。
然后我们需要把这个view的父元素的宽高设置为100%，不然它们默认是0，无论怎么设置，view都不会垂直居中。
至于top的值，大多数人可能都会选择50%，因为毕竟是一半，我们先试一下效果。

page {
  height: 100%;
  width: 100%;
}
.test {
  width: 300rpx;
  height: 300rpx;
  background-color: red;
  margin:0 auto;
  position: relative;
  top: 50%;
}

效果如下：

view确实下移了，但是似乎并没有居中。因为top的值，是根据当前元素的顶部为参考点的，而且view本身是有高度的，所以如果只设置top为50%，view的位置就是距离当前页面顶部50%+view高度。
我提供一个思路，可以设置一下margin-top的值，设置为当前view高度的负二分之一。
即：

.test {
  width: 300rpx;
  height: 300rpx;
  background-color: red;
  margin:0 auto;
  position: relative;
  top: 50%;
  margin-top: -150rpx;
}

效果如下：

如我们所愿，这个view成功的垂直居中了。
方法还有很多，我只是提供一个思路，大家可以自由发挥。
有什么问题可以联系QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料