微信小程序常见的View中的控件居中的问题

一个很常见的问题，我们在一个View中加入了元素，这里我们举例比如是text

    asdfasdf

基本的样式如下，为了方便查看，我们使用一个外边框来显示

.viewclass{
  height: 300px;
  width: 300px;
  border: solid 1px black;
}

这里显示的效果如下

想要实现text的垂直居中 将css修改为

.viewclass{
  height: 300px;
  width: 300px;
  border: solid 1px black;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

想要实现text的水平居中 将css修改为

.viewclass{
  height: 300px;
  width: 300px;
  border: solid 1px black;
  display: flex;
  flex-direction: row;
  justify-content: center;
}