부트 스트랩 모달 - 정렬

Question

내가 무엇을 시도하든 관계없이 모달은 페이지 상단에서 중간에 정렬됩니다. 테이블 def 안에있는 버튼에서 모달을 열려고합니다. 그것은 페이지의 유일한 모달입니다.

   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="##myModal">Click Here to Preview the Job Ad</button> 

     <div id="myModal" class="modal fade"> 
    <div class="modal-dialog vertical-align-center"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Do you want to save changes you made to document before closing?</p> 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 
      </td> 
     </tr> 

Answer 1

이것이 부트 스트랩의 기본 위치입니다. 그러나, 당신은

그냥 여기 modal-dialog

style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" 

의 스타일에 다음을 추가 CSS를 통해 위치를 변경할 수 있습니다 bootply입니다 : http://www.bootply.com/PZ3TA6qZNc

transform없이이 위치이 같은 것을 나타납니다이 :