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

检查一下。没有在移动设备上测试但应该可以使用

HTML

<div class="panel">
 <div class="panelInner">
  <div class="box">
   <div class="boxInner">hi there</div>
  </div>
 </div>
</div>

CSS

html {
min-height: 100%;
height: 100%;
}

body {
height: 100%;
margin: 0;
}

.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}

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

这是一个fiddle

Answer 2

我真的尽力以干净的方式解决这个问题，但是我又进行了一些测试，这显然是Mobile Safari的渲染引擎中的一个错误。我决定用一个公认的脏jQuery hack解决它，但至少它现在有用了。

我的页面上有一张全屏照片，最上面是中间的一个带子，另一张是在页面的最底部。最上面的一个很容易解决：只使用绝对定位而不是相对（无论如何相对于页面顶部定位）。＆＃34;顶部＆＃34;另一方面，在将其定位设置为绝对之后，必须基于页面的高度重新计算底带的属性。我通过设置＆＃34; top＆＃34;解决了这个问题。属性：从页面顶部到底部带的垂直偏移+（全屏幕带到/ 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));
    }
});

将div放在100％高度div中垂直居中并不适用于Mobile Safari

2 个答案: