Bootstrap 3 modal vertical position center

后端 未结 30 1197
天涯浪人
天涯浪人 2020-11-28 00:15

This is a two part question:

  1. How can you position the modal vertically in the center when you don\'t know the exact height of the modal?

  2. Is

30条回答
  •  孤城傲影
    2020-11-28 00:57

    Expanding on @Finik's excellent answer, this fix is only applied to non-mobile devices. I tested in IE8, Chrome, and Firefox 22 - it works with very long or short content.

    .modal {
      text-align: center;
    }
    @media screen and (min-device-width: 768px) {
      .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
      }
    }
    
    .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    

提交回复
热议问题