ios - 在 100% 高度的 div 中垂直居中 div 在 Mobile Safari 上不起作用

Question

我试图将一个 div 放在另一个 div 中，该 div 延伸到屏幕的整个高度并将其垂直居中，如下所示:

Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png

大照片是全屏 div，白色带是垂直居中的 div。下面的解决方案在我尝试过的所有可能的计算机和浏览器上都能正常工作……除了 Mobile Safari。出于某种原因，Mobile Safari(至少在 iPad 上)决定将嵌套 div 放在页面下方 50% 而不是其父 div 下方 50%。

HTML:

<div class="band full">
    <div class="band">
        *content*
    </div>
</div>

SCSS(删除了不相关的标签):

div.band{ //General styling for div.band elements
    margin: 0px;
    padding: 80px 0px;
    width: 100%;

    &.full{ //Style the parent div
        height: 100%;
    }

    div.band{ //Style the nested div
        position: relative;
        top: 50%;
        margin-top: -200px;
        padding: 20px 0px;
        height: 400px;
    }
}

我有一种挥之不去的感觉，认为这是 Mobile Safari 中的一个错误。我当然希望不是。有谁知道如何解决这个问题？

Answer 1

我确实尽了最大努力以简洁的方式解决了这个问题，但我进行了更多测试，这显然是 Mobile Safari 渲染引擎中的一个错误。我决定用公认的肮脏的 jQuery hack 来解决它，但至少它现在可以工作了。

我的页面上有一张这样的全屏照片，最上面的中间有一个带子，另一张在页面的最底部。最上面的一个很容易解决:只需使用绝对定位而不是相对定位(无论如何都是相对于页面顶部定位)。另一方面，bottom band 的“top”属性必须在将其定位设置为绝对定位后根据页面的高度重新计算。我通过将“顶部”属性设置为以下解决了这个问题:从页面顶部到底部带的垂直偏移 +(全屏带的高度到中心的/2)。

或者代码形式:

$(window).load(function() { //Wait until the page is fully loaded
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
        $('div.band#top div.band').css('position', 'absolute');
        $('div.band#bottom div.band').css('position', 'absolute');
        $('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
    }
});