по горизонтали и по вертикали по центру ДИВ «прыгает», когда изображение добавляется

Question

Вопрос Справочной информации:

У меня есть простой вид, состоящий из формы, кнопки и какой-нибудь текста. Через CSS у меня есть горизонтальное и вертикальное центрирование содержимого страницы.

выпуска:

Когда пользователь нажимает на кнопку Я присоединяя Spinner .gif изображение в DIV. Проблема, которую я имею в настоящее время, заключается в том, что содержимое сосредоточено, добавление изображения приводит к тому, что форма перемещается вверх, что не очень хорошо выглядит.

Код Pen Пример:

Пожалуйста, смотрите мой 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); 
    }); 

Как я могу идти об изменении этого так содержание все еще вертикально/горизонтально по центру с помощью, когда кнопка мыши и кок добавить его dosen't вызвать содержимое подпрыгивать ?

Answer 1

Вы можете указать #loadSpinner соответствующую высоту 60px. Это позволит избавиться от «прыжков»:

#loadSpinner { 
    height:60px; 
} 

Updated Codepen