css - 响应地改变 margin-top

Question

我正在尝试以一种基于 div 高度响应式设置 margin-top 的方式来格式化 HTML DIV: jsfiddle

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

现在怎么样:

应该是这样的:

Answer 1

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

这样，您就可以在“表格单元格”中使用 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>