Hola usuario de nuestra web, hemos encontrado la respuesta a lo que necesitas, deslízate y la obtendrás un poco más abajo.
Solución:
.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;
Y ajuste un poco la clase .fade para asegurarse de que aparezca por el borde superior de la ventana, en lugar del centro
1. ¿Cómo se puede colocar el modal verticalmente en el centro cuando no se conoce la altura exacta del modal?
Para centrar de forma absoluta el Bootstrap 3 Modal sin declarar una altura, primero deberá sobrescribir el Bootstrap CSS agregando esto a su hoja de estilo:
.modal-dialog-center /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
Esto colocará la esquina superior izquierda de los diálogos modales en el centro de la ventana.
Tenemos que agregar esta consulta de medios o, de lo contrario, el margen modal izquierdo es incorrecto en dispositivos pequeños:
@media (max-width: 767px)
.modal-dialog-center /* Edited classname 10/03/2014 */
width: 100%;
Ahora necesitaremos ajustar su posición con JavaScript. Para hacer eso, le damos al elemento un margen superior e izquierdo negativo igual a la mitad de su alto y ancho. En este ejemplo usaremos jQuery ya que está disponible con Bootstrap.
$('.modal').on('shown.bs.modal', function()
$(this).find('.modal-dialog').css(
'margin-top': function ()
return -($(this).outerHeight() / 2);
,
'margin-left': function ()
return -($(this).outerWidth() / 2);
);
);
Actualización (10/01/2015):
Añadiendo la respuesta de Finik. Créditos para centrarse en lo desconocido.
.modal
text-align: center;
padding: 0!important;
.modal:before
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
.modal-dialog
display: inline-block;
text-align: left;
vertical-align: middle;
Observa el margen negativo, ¿verdad? Esto elimina el espacio agregado por inline-block. Ese espacio hace que el modal salte a la parte inferior de la página @media width <768px.
2. ¿Es posible tener el modal centrado y tener overflow: auto en el modal-body, pero solo si el modal excede la altura de la pantalla?
Esto es posible dando al modal-body un overflow-y: auto y un max-height. Esto requiere un poco más de trabajo para que funcione correctamente. Comience agregando esto a su hoja de estilo:
.modal-body
overflow-y: auto;
.modal-footer
margin-top: 0;
Usaremos jQuery nuevamente para obtener la altura de la ventana y establecer primero la altura máxima del contenido modal. Luego tenemos que establecer la altura máxima del cuerpo modal, restando el contenido modal con el encabezado modal y el pie de página modal:
$('.modal').on('shown.bs.modal', function() );
Puede encontrar una demostración funcional aquí con Bootstrap 3.0.3: http://cdpn.io/GwvrJ
EDITAR: Recomiendo usar la versión actualizada en su lugar para una solución más receptiva: http://cdpn.io/mKfCc
Actualización (30/11/2015):
function setModalMaxHeight(element)
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight()
$('.modal').on('show.bs.modal', function()
$(this).show();
setModalMaxHeight(this);
);
$(window).resize(function()
if ($('.modal.in').length != 0)
setModalMaxHeight($('.modal.in'));
);
(Actualizado el 30/11/2015 http://cdpn.io/mKfCc con la edición anterior)
Mi solución
.modal-dialog-center
margin-top: 25%;
Al final de todo puedes encontrar las interpretaciones de otros sys admins, tú de igual manera puedes mostrar el tuyo si te gusta.