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

Question

我有以下CSS和HTMLcode：

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上的文字垂直居中，因此我认为它不起作用。