javascript - 附加图像时水平和垂直居中的 div 'jumping'

Question

问题背景:

我有一个简单的 View ，由一个表单、一个按钮和一些文本组成。通过 CSS，我使页面内容水平和垂直居中。

问题:

当用户单击该按钮时，我会将 spinner .gif 图像附加到 div 中。我目前遇到的问题是，由于内容居中附加图像会导致表单向上移动，这看起来不太好。

代码笔示例:

请参阅我的 codepen 以获取该问题的演示

http://codepen.io/daveharris/pen/dMvaGW

HTML:

 <div id="centerDiv" class="centered">
  <div class="col-lg-12 text-centered pushDown">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <div class="row">
            <div class="col-lg-4 form-group text-center">
              A HomePage Item
            </div>

            <div class="col-lg-4 form-group text-center">
              A HomePage Item

            </div>

            <div class="col-lg-4 form-group text-center">

              A HomePage Item
            </div>

          </div>
          <div class="row">
            <div class="col-sm-12 form-group">
              <input type="submit" id="submitBtn" class="btn btn-success btn-block" value="Submit" />
            </div>
          </div>
          <div class="col-lg-12 text-center">
            <h4>This is homepage text</h4>
          </div>

          <div id="loadSpinner" class="text-center">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.pushDown {
  margin-top: 50px;
}

.spinnerSize {
  height: 60px;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 90%;
}

JavaScript 和 jQuery:

    $('#submitBtn').click(function(){

          var spinner = '<img src="http://i870.photobucket.com/albums/ab267/GLaDOS_Chibi/Aperture_Science_by_crazychrislau93.gif" class="spinnerSize">';

          $('#loadSpinner').append(spinner);
     });

如何更改此设置，以便当单击按钮并添加微调器时内容仍然垂直/水平居中，不会导致内容跳跃？

Answer 1

您可以为#loadSpinner指定相应的高度60px。这将摆脱“跳跃”:

#loadSpinner {  
  height:60px;
}

<强> Updated Codepen