微信小程序view居中

3/1/2017来源:Android开发人气:1716

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%; }