屏幕on ui上的垂直居中元素

Question

我正在使用Onsen，并且试图使ons-page中的元素在屏幕上垂直居中对齐，但是没有运气，这是我尝试过的。

<ons-page id="login-form" modifier="full_bg">
        <ons-row align="center">
            <ons-col width="50%" vertical-align="center">
                <div style="padding-left:5px">
                    <ons-button modifier="large">Signin</ons-button>
                </div>
            </ons-col>
            <ons-col width="50%" vertical-align="center">
                <div style="padding-left:5px">
                    <ons-button modifier="large">Signin</ons-button>
                </div>
            </ons-col>
        </ons-row>
    </ons-page>

有什么帮助吗？

Answer 1

尝试添加包裹。

HTML

<div class="flexbox-container">
  <ons-row>...</ons-row>
</div>

CSS

.flexbox-container {

   height: 100%;

   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   align-items: center;
}

参考：https://davidwalsh.name/css-vertical-center-flexbox