怎么让按钮垂直居中显示？

怎么让按钮垂直居中显示？如果在logo2加diapaly布局会乱

<view id="logo2">
        <view>
            <button class="wx-button"><image class="wx-img" src="https://socialize.oss-cn-shenzhen.aliyuncs.com/img/tab/CYDuploading/weixinICON.png"></image>登录</button>
        </view>
        <view>
            <button class="login-button" @click="login()">登录</button>
        </view>
        <view>
            <button class="apple-button"><image class="wx-img" src="https://socialize.oss-cn-shenzhen.aliyuncs.com/img/tab/CYDuploading/pinguoICON.png"></image>登录</button>
        </view>
    </view>
#logo2 {
        width: 100%;
        height: 100vh;
        background: url("https://socialize.oss-cn-shenzhen.aliyuncs.com/img/tab/shanshuitu.png") center center no-repeat;
        background-size: 100% 100%;
    }
    .wx-button {
        width: 50%;
        border-radius: 50px;
        font-size: 16px;
        color: green;
        margin:0 auto;
    }
    .wx-img {
        width: 23px;
        height: 20px;
        margin-right: 10px;
    }
    .login-button {
        width: 50%;
        border-radius: 50px;
        font-size: 16px;
        color: blue;
        margin-top: 20px;
    }
    .apple-button {
        width: 50%;
        border-radius: 50px;
        font-size: 16px;
        margin-top: 20px;
    }

algin-item:center justfy-content:center 这两个参数是对display作垂直/水平居中的