Vertical alignment of bootstrap modal on mobiles

Question

This question seems to have been asked a number of times on github but I haven't come across any solutions: https://github.com/twitter/bootstrap/issues/1399

how can the modal be vertically aligned properly on small screens?

Answer 1

Edit: As of Bootstrap 2.0.2, this is no longer an issue. Basically, bootstrap now implements the solution proposed below, which I'll leave here for reference purposes.

Generally, on small screens modals will fill out most of your window, so positioning relative to the button that triggered the modal doesn't make terribly much sense. What I usually do is just overwriting the modal position for phones:

@media (max-width: 767px) {
  .modal {
      top: 20px;
      // negative left margin to position horizontally.
      margin: 0 0 0 -280px; 
      // already in modals.less, just copied for clarification:
      left: 50%;  
      position: fixed;
   }
}

(This is in LESS, pure CSS solutions looks similar).