身高：100％不在野生动物园工作

Question

我有一个子div在父div下垂直居中{parent div有一定的高度}。我已经为孩子div分配了高度：100％但是它不仅仅是在徒步旅行中使用这个属性。以下是有关此问题的屏幕截图。Safari bug

一切都在铬和moz工作正常，但野生动物园。这是该网站的实时版本。 http://www.ravnapp.com/

任何帮助将不胜感激，谢谢！

更新：这是相关的HTML代码。

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
  <div class="action-image uk-position-relative">
    <div class="uk-cover-background">
      <img src="img/action1.png" width="100%" height="" alt="">
    </div>
  </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
  <div class="uk-vertical-align-middle">
    <h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
    <p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
  </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
    <div class="uk-vertical-align-middle">
      <h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
      <p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
    </div>
</div>

<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
  <div class="action-image uk-position-relative">
    <div class="uk-cover-background">
      <img src="img/action2.png" width="100%" height="" alt="">
    </div>
  </div>
</div>

Answer 1

看起来容器div实际上没有设置高度，并且在内容可以垂直居中之前需要有一个高度。因为你要全屏并将宽度设置为50％并希望高度匹配..只需添加

height: 50vw;

到每个容器。这会将高度设置为视口宽度的一半，这将与给定当前设置的框的宽度相匹配。

您必须将图像调整为实际上正方形，因为它们只有几个像素。