响应式更改 margin-top

Question

我正在尝试格式化 HTML DIV，以便根据 div 的高度响应地设置 margin-top：jsfiddle

包装器内还有另一个 div，它设置了 display: none，但是当用户输入错误的密码时它可能会改变。问题是，当 display: content 设置为第二个 div 时，下面有一个 div 会被向下推。我希望页面的内容响应地向上而不是向下。

现在怎么样了：

应该如何：

Answer 1

鉴于您的示例、您的目标以及您因 IE10 而避免使用 flexbox 的偏好，我认为您最好的选择是使用 display:table 来处理此容器。

这样，您就可以在“table-cell”中使用vertical-align 属性。

检查下面的示例。我添加了一个切换按钮来显示/隐藏您的验证码以进行演示。 可能需要全屏查看以获得效果。

$("#toggle").on('click', function() {
  $(".captcha").toggle();
});

html,body {
  height: 100%;
}
.outer-wrapper {
  height: 100%;
  width: 100%;
  background: #eeeeee;
  display: table;
}

.inner-wrapper {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  height: inherit;
}

.login-wrapper {
  background-color: #172238;
  color: white;
  width: 200px;
  text-align: center;
  height: auto;
  display: block;
  margin: 0 auto;
}

.captcha{
  margin-top: 250px;
  display: content; // This one changes
}

.homologation-line {
  min-width: 200px;
  background-color: #ffd800;
  color: black;
  text-align: center;
  height: 30px;
}

#toggle {
 position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
  <div class="inner-wrapper">
      <div class="login-wrapper">
        <p>Login</p>
        <div class="captcha">
          ENTER THE DIGITS:
        </div>
    </div>
    <div class="homologation-line">
       HOMOLOGATION
    </div>
  </div>
</div>