Ventana modal Bootstrap centrada verticalmente

Me gustaría centrar mi modal en la ventana gráfica (centro) Intenté agregar algunas propiedades css

 .modal { position: fixed; top:50%; left:50%; }   

Estoy usando este ejemplo http://jsfiddle.net/rniemeyer/Wjjnd/

Lo intenté

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Esto hace el trabajo: http://jsfiddle.net/sRmLV/1140/

Utiliza un helper-div y algunos css personalizados. No se requiere javascript ni jQuery.

HTML (basado en el código de demostración de Bootstrap )

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</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>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Debido a que la respuesta de gpcola no funcionó para mí, edité un poco para que funcione ahora. Usé "margin-top" en lugar de transform. Además, uso el evento "show" en lugar de "show" porque después me dio un salto muy malo de posicionamiento (visible cuando tienes animaciones de arranque). Asegúrese de configurar la pantalla para "bloquear" antes de posicionar, de lo contrario $ dialog.height () será 0 y el modal no estará completamente centrado.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

Esto es lo que hice para mi aplicación. Si observa las siguientes clases en el archivo bootstrap.css .modal-dialog tiene un relleno predeterminado de 10px y pantalla @media y (min-width: 768px) .modal-dialog tiene un relleno superior establecido en 30px. Entonces, en mi archivo css personalizado, configuré mi relleno superior en un 15% para todas las pantallas sin especificar un ancho de pantalla multimedia. Espero que esto ayude.

.modal-dialog {
  padding-top: 15%;
}

La mejor manera que encontré para todos los navegadores HTML5:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </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>
    </div>
</div>

// Estilos

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

El parámetro superior se anula en .modal.fade.in para forzar el valor establecido en su declaración personalizada, agregue la !importantpalabra clave después de top. Esto obliga al navegador a usar ese valor e ignorar cualquier otro valor para la palabra clave. Esto tiene el inconveniente de que no puede anular el valor en ningún otro lugar.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

A partir de Bootstrap 4, se agregó la siguiente clase para lograr esto sin JavaScript.

modal-dialog-centered

Puedes encontrar su documentación aquí .

Gracias vd por señalar que necesita agregar .modal-dialog-centrado a .modal-dialog para centrar verticalmente el modal.

esto funciona para mí perfectamente:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

URL de demostración completa : https://codepen.io/dimbslmh/full/mKfCc

puedes usar:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

para centrarlo tanto vertical como horizontalmente.

Porque la mayor parte de la respuesta aquí no funcionó, o solo funcionó parcialmente:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Debe usar el selector [estilo] para aplicar solo el estilo en el modal que está actualmente activo en lugar de todos los modales. .inhubiera sido genial, pero parece que se agrega solo después de que se completa la transición, que es demasiado tarde y hace algunas transiciones realmente malas. Afortunadamente, parece que bootstrap siempre aplica un atributo de estilo en el modal tal como está comenzando a mostrarse, por lo que esto es un poco extraño, pero funciona.

La :not([style='display: none;'])parte es una solución alternativa para arrancar, no eliminar correctamente el atributo de estilo y, en cambio, establecer la visualización de estilo en ninguno cuando cierra el cuadro de diálogo.

Puede lograr un centro de alineación vertical en Bootstrap 3 modal así:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

y agregue esta clase css al contenedor "modal-dialog"

<div class="modal-dialog modal-vertical-centered">
...

Ejemplo de trabajo de jsFiddle: http://jsfiddle.net/U4NRx/

¡La forma más limpia y sencilla de hacer esto es usar Flexbox! Lo siguiente alineará verticalmente un modal Bootstrap 3 en el centro de la pantalla y es mucho más limpio y simple que todas las otras soluciones publicadas aquí:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

NOTA: Si bien esta es la solución más simple, es posible que no funcione para todos debido al soporte del navegador: http://caniuse.com/#feat=flexbox

Parece que (por lo general) IE se queda atrás. En mi caso, todos los productos que desarrollo para mí o para mis clientes son IE10 +. (No tiene sentido desde el punto de vista comercial invertir tiempo de desarrollo en versiones anteriores de IE cuando podría usarse para desarrollar realmente el producto y sacar el MVP más rápido). Esto ciertamente no es un lujo que todos tienen.

He visto sitios más grandes detectar si se admite o no flexbox y aplicar una clase al cuerpo de la página, pero ese nivel de ingeniería de front-end es bastante robusto, y aún necesitaría un respaldo.

Animaría a las personas a adoptar el futuro de la web. Flexbox es increíble y deberías comenzar a usarlo si puedes.

PD: este sitio realmente me ayudó a comprender flexbox como un todo y aplicarlo a cualquier caso de uso: http://flexboxfroggy.com/

EDITAR: en el caso de dos modales en una página, esto debería aplicarse a .modal.in

Ventajas:

• contenido modal accesible incluso cuando es más alto que el dispositivo
• no usa display:table-cell(eso no es para diseños)
• no requiere ninguna modificación al modo Bootstrap 3 predeterminado markup
• el posicionamiento es puro CSS. El JS se agrega para cerrar el modal al hacer clic / tocar debajo y encima de él
• Incluí el sin prefijo SCSSpara aquellos que usan gulpogrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </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>

Nota : Tengo la intención de mantener esta respuesta actualizada con las últimas especificaciones de Bootstrap 3. Para una solución Bootstrap 4, vea esta respuesta (por ahora son más o menos iguales, pero con el tiempo pueden diferir). Si encuentra algún error o problema, avíseme y lo actualizaré. Gracias.

Limpio, sin prefijo SCSS(para usar con gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Sin embargo, otra solución CSS. No funciona para ventanas emergentes que son más grandes que el puerto de vista.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

En .modal-dialogclase, anula la posición a absoluto (de relativo) y centra el contenidoright:0, left: 0

Al .modal.fade .modal-dialog , .modal.in .modal-dialogconfigurar la animación de transición en toplugar de traducir.

margin-topmueve la ventana emergente ligeramente por debajo del centro en caso de una ventana emergente pequeña y en caso de ventanas emergentes largas, el modal está atascado con el encabezado. Por lo tantomargin-top:0, margin-bottom:0

Necesito refinarlo aún más.

Para aquellos que usan bootstrap angular-ui, pueden agregar las siguientes clases según la información anterior:

Nota: No se necesitan otros cambios y resolverá todos los modales.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

No es necesario para nosotros javascript. Boostrap modal agrega clase .in cuando aparece. Simplemente modifique esta combinación de clase con modalclassName.fade.in con flex css y ya está.

agregue este CSS para centrar su modal vertical y horizontalmente.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Mi elección, solo un poco de CSS: (NO funciona en IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Puedes jugar con la primera regla para cambiar cómo aparece el modal.

Usando: Bootstrap 3.3.4

Simplemente agregue el siguiente CSS a su existente, funciona bien para mí

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

Basado en la respuesta de Arany , pero también contabilizando el desplazamiento de la página.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Creo que esta es una solución CSS pura un poco más limpia que la solución de Rens de Nobel. Además, esto no impide cerrar el diálogo haciendo clic fuera de él.

http://plnkr.co/edit/JCGVZQ?p=preview

Simplemente agregue alguna clase de CSS al contenedor DIV con la clase .modal-dialog para obtener una mayor especificidad que el CSS de bootstraps, por ejemplo, centrado.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Y haga que este contenedor .modal-dialog.centered esté fijo y posicionado correctamente.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

O incluso más simple usando flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Esto funciona en BS3, no probado en v2. Centra el modal verticalmente. Tenga en cuenta que hará la transición allí; si desea que solo aparezca en la posición, edite la transitionpropiedad CSS para.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Esto toma la respuesta de Arany y lo hace funcionar si el modal es más alto que la altura de la pantalla:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Para agregar centrado modal vertical a bootstrap modal.js, agregué esto al final de la Modal.prototype.showfunción:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Para hacer que el modo Modal verifique el cuadro de diálogo Alinear todo medio.

/* Nota:

1.Aunque no necesite asignar un selector, encontrará todos los modales del documento y lo hará verticalmente en el medio

2.Para evitar el medio, un modo específico para ser el centro puede usar: no selector en el evento de clic

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Desde Milan Pandya

Use este script simple que centra los modales.

Si lo desea, puede establecer una clase personalizada (por ejemplo: .modal.modal-vcenter en lugar de .modal) para limitar la funcionalidad solo a algunos modales.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Agregue también esta corrección CSS para el espacio horizontal del modal; mostramos el pergamino en los modales, Bootstrap oculta automáticamente los pergaminos del cuerpo:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

Otra respuesta de CSS a esta pregunta ...
Esta solución usa CSS solo para lograr el efecto deseado mientras mantiene la capacidad de cerrar el modal haciendo clic fuera de él. También le permite establecer .modal-contentmáximos de alto y ancho para que su ventana emergente no crezca más allá de la ventana gráfica. Un desplazamiento aparecerá automáticamente cuando el contenido crezca más allá del tamaño modal.

nota: se debe omitir el
Bootstrap recomendado .modal-dialog divpara que esto funcione correctamente (no parece romper nada). Probado en Chrome 51 e IE 11.

Código CSS:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDITAR: La .modal-dialogclase le permite elegir si un usuario puede o no cerrar el modal haciendo clic fuera del modal. La mayoría de los modales tienen un botón explícito de 'cerrar' o 'cancelar'. Tenga esto en cuenta cuando use esta solución alternativa.

La mejor solución para centralizar su modal con ancho y alto es, en css add y en modal, agregue esta 'centralizar' como clase.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Centrado verticalmente Agregue .modal-dialog-centrado a .modal-dialog para centrar verticalmente el modal

Iniciar demo modal

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>