微信小程序view居中

wxml文件

<view class="main">

  <view class="center">
    <text>申请服务商店</text>

  </view>

    <view class="center">
      <input class="inputView" name="username" placeholder="请输入服务的商店名称"/>

    </view>

    <view class="buttonlayout">
            <button class="button1">申请认证</button>
            <button class="button2">添加新服务商店</button>

   </view>

</view>

wxss文件

.main{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inputView{
  border: 1px solid #abbcbc;
  background-color: white;
  border-radius: 10px;
  width:80%;
  margin-top: 10px;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.buttonlayout{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 50px;
}
.center{
  display: flex;
  justify-content: center;
}
.button1{
  width:30%;
}
.button2{
  width:45%;
}