如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

HTML部分

<div class="zhihu">
    <div class="loginMain">

    </div>
</div>

　css部分

.zhihu {
    height:100%;
    min-width:720px;
    text-align: center;
    vertical-align: middle;
}
.zhihu:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.loginMain {
    display: inline-block;
    width:300px;
    height:590px;
    margin:auto;
    background-color: #1b6d85;
    vertical-align: middle;
}

　　要点：元素必须都为inline-block;