Centrar una posición: elemento fijo

Me gustaría hacer una position: fixed; cuadro emergente centrado en la pantalla con un ancho y alto dynamic. Usé margin: 5% auto; para esto. Sin position: fixed; se centra bien horizontalmente, pero no verticalmente. Después de agregar position: fixed; , incluso no se centra horizontalmente.

Aquí está el conjunto completo:

 .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } 
 
This should be inside a horizontally and vertically centered box.

¿Cómo centro esta caja en la pantalla con CSS?

Básicamente, necesitas establecer la top e left al 50% para centrar la esquina superior izquierda del div. También debe establecer el margin-top y el margin-left en la mitad negativa de la altura y ancho del div para desplazar el centro hacia el centro del div.

Por lo tanto, con la condición (modo estándar), esto debería hacer:

 position: fixed; width: 500px; height: 200px; top: 50%; left: 50%; margin-top: -100px; /* Negative half of height. */ margin-left: -250px; /* Negative half of width. */ 

O bien, si no te importa centrar verticalmente y navegadores antiguos como IE6 / 7, entonces también puedes agregar left: 0 y right: 0 al elemento que tiene un margin-left y un margin-right de auto , para que el elemento posicionado fijo que tiene un ancho fijo sabe dónde comienzan sus desplazamientos izquierdo y derecho. En tu caso así:

 position: fixed; width: 500px; height: 200px; margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */ left: 0; right: 0; 

Nuevamente, esto solo funciona en IE8 + si te preocupa el IE, y esto se centra solo horizontalmente, no verticalmente.

Quiero hacer un cuadro emergente centrado en la pantalla con ancho y alto dynamics.

Aquí hay un enfoque moderno para centrar horizontalmente un elemento con un ancho dynamic; funciona en todos los navegadores modernos; soporte se puede ver aquí .

Ejemplo actualizado

 .jqbox_innerhtml { position: fixed; left: 50%; transform: translateX(-50%); } 

Para el centrado vertical y horizontal, puede usar lo siguiente:

Ejemplo actualizado

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

También puede agregar más propiedades prefijadas del vendedor (vea los ejemplos).

O simplemente agrega left: 0 y right: 0 a tu CSS original, lo que hace que se comporte de manera similar a un elemento regular no fijo y funciona la técnica de margen automático habitual:

 .jqbox_innerhtml { position: fixed; width:500px; height:200px; background-color:#FFF; padding:10px; border:5px solid #CCC; z-index:200; margin: 5% auto; left: 0; right: 0; } 

Tenga en cuenta que necesita utilizar un DOCTYPE HTML válido (X) para que se comporte correctamente en IE (que, por supuesto, debe tener de todos modos …!)

Agregue un contenedor como:

 div { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; } 

Luego coloque su caja en este div hará el trabajo.

Solo agrega:

 left: calc(-50vw + 50%); right: calc(-50vw + 50%); margin-left: auto; margin-right: auto; 

Esta solución no requiere que usted defina un ancho y alto para su div emergente.

http://jsfiddle.net/4Ly4B/33/

Y en lugar de calcular el tamaño de la ventana emergente, y menos la mitad hacia arriba, javascript está redimensionando el popupContainer para completar toda la pantalla …

(100% de altura, no funciona cuando se utiliza display: table-cell; (que se requiere para centrar algo verticalmente)) …

De todos modos, funciona 🙂

 left: 0; right: 0; 

No funcionaba con IE7.

Cambiado a

 left:auto; right:auto; 

Empecé a trabajar, pero en los navegadores restantes ¡dejó de funcionar! Así se usa de esta manera para IE7 a continuación

 if ($.browser.msie && parseInt($.browser.version, 10) <= 7) { strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'}); } 

Básicamente puedes envolverlo en otro div y establecer su position en fixed .

 .bg { position: fixed; width: 100%; } .jqbox_innerhtml { width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } 
 
This should be inside a horizontally and vertically centered box.

Una posible respuesta :

     CSS Center Background Demo    
World
Wide
Web

Intenta usar esto para elementos horizontales que no se centrarán correctamente.

width: calc (width: 100% – width lo que sea que no esté centrado )

Por ejemplo, si su barra de navegación lateral es 200px:

 width: calc(100% - 200px); 

La única solución infalible es usar tabla align = center como en:

 
...

No puedo creer que personas de todo el mundo desperdicien esta gran cantidad de tiempo tonto para resolver un problema tan fundamental como centrar un div. La solución css no funciona para todos los navegadores, la solución jquery es una solución computacional de software y no es una opción por otros motivos.

He perdido demasiado tiempo repetidamente para evitar usar la mesa, pero la experiencia dime que deje de pelear. Use la tabla para centrar div. ¡Funciona todo el tiempo en todos los navegadores! No te preocupes más.

Intereting Posts