html - 在移动设备上显示表格不垂直居中文本

Question

我有以下 CSS 和 HTML 代码:

CSS

.table{
    display:table;  
    height:100%;
    width:100%;
}

.table-cell{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="table">
<div class="table-cell">
    <a class="cta cta-1" href="#">Shop Now</a>
</div>

它在桌面上将文本正确地垂直居中，但我尝试在我的手机 (iPhone) 上查看它但它不起作用，文本与顶部对齐。为什么会这样？你可以在这里看到它。 http://machinas.com/wip/stradviarius/startpage/

Answer 1

如果您使用不会更改的固定内容，您可以使用:

.table-cell{
    display: table-cell;
    margin-top:170px;
}

或对文本使用line-height(可能是最好的):

.cta {
    line-height:339.328px;
}

339.328px 来自您的 div 高度。

注意:您的网站不会在我的 Chromebook 上使文本垂直居中，所以我认为它不起作用。