微信小程序 关于view的居中问题

微信小程序 关于view的居中问题

很多时候我们需要把一个view水平或垂直居中，而这个无非就在样式里添加三句：

.example{
  display: flex;
  justify-content: center;  /*水平*/
  align-items: center; /*垂直*/
  }

但是我用的时候忘了一件事情，就是这些样式用在哪个view的问题，这也导致我以为自己用错了语句，在那瞎查还想不懂。所以今天写这个来提个醒

写个例子：
wxml

<view class="outside">
  <view class="inside">测试一view>
  <view class="inside">测试二view>
  <view class="inside">测试三view>
view>

css
情况一：

page{
  height:100%;
}
.outside{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inside{
  margin: 30rpx;
  padding: 20rpx;
  height: 70rpx;
  width: 60%;
  border: 2rpx solid;
  border-color: black;
}

修改部分细节：

.outside{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.inside{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx;
  padding: 20rpx;
  height: 70rpx;
  width: 60%;
  border: 2rpx solid;
  border-color: black;
}

两种情况分别得出以下结果：

其实就是要注意我们需要居中的对象是谁，如果是view内部的，就直接在这个view的样式添加居中语句，而如果想要整个view都居中，则要在这个view外部也就是上一层添加

另外要记得一点就是如果page并没有用到整个页面，即页面显示高度height没有定为100%，则不会在整个页面达到居中效果