javascript - ejemplos - Usando jQuery para centrar un DIV en la pantalla
responsive design html css (26)
Editar:
Si la pregunta me enseñó algo, es esto: no cambies algo que ya funciona :)
Proporciono una copia (casi) literal de cómo se manejó en http://www.jakpsatweb.cz/css/css-vertical-center-solution.html : está fuertemente pirateada para IE pero proporciona una forma pura de CSS respondiendo a la pregunta:
.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper {#position:absolute; #top:50%;
display:table-cell; vertical-align:middle;}
.content {#position:relative; #top:-50%;
margin:0 auto; width:200px; border:1px solid orange;}
Fiddle: http://jsfiddle.net/S9upd/4/
He corrido esto a través de browsershots y parece estar bien; si no fuera por otra cosa, mantendré el original a continuación para que el porcentaje de margen manejado por las especificaciones de CSS vea la luz del día.
Original:
Parece que llego tarde a la fiesta!
Hay algunos comentarios anteriores que sugieren que esta es una pregunta de CSS: separación de inquietudes y todo. Permítanme comenzar con esto diciendo que CSS realmente se disparó en el pie en este. Quiero decir, ¿qué tan fácil sería hacer esto?
.container {
position:absolute;
left: 50%;
top: 50%;
overflow:visible;
}
.content {
position:relative;
margin:-50% 50% 50% -50%;
}
¿Derecha? La esquina superior izquierda del contenedor estaría en el centro de la pantalla, y con márgenes negativos, el contenido reaparecerá mágicamente en el centro absoluto de la página. http://jsfiddle.net/rJPPc/
¡Incorrecto! El posicionamiento horizontal está bien, pero verticalmente ... Oh, ya veo. Aparentemente en css, cuando se establecen márgenes superiores en%, el valor se calcula como un porcentaje siempre con relación al ancho del bloque contenedor . ¡Como manzanas y naranjas! Si no confías en mí o en Mozilla doco, juega con el violín de arriba ajustando el ancho del contenido y sorpréndete.
...
Ahora, con CSS siendo mi pan y mantequilla, no estaba dispuesto a rendirme. Al mismo tiempo, prefiero las cosas fáciles, así que tomé prestadas las conclusiones de un http://www.jakpsatweb.cz/css/css-vertical-center-solution.html y las convertí en un violín de trabajo. En pocas palabras, creamos una tabla en la que la alineación vertical se establece en el medio:
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
Y que la posición del contenido se ajusta con buen margen antiguo : 0 automático; :
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
Trabajando con el violín como se prometió: http://jsfiddle.net/teDQ2/
¿Cómo hago para configurar un <div> en el centro de la pantalla usando jQuery?
¿Por qué no usas CSS para centrar un div?
#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
Aquí está mi ir en ello. Terminé usándolo para mi clon de Lightbox. La principal ventaja de esta solución es que el elemento se mantendrá centrado automáticamente, incluso si se cambia el tamaño de la ventana, lo que lo hace ideal para este tipo de uso.
$.fn.center = function() {
this.css({
''position'': ''fixed'',
''left'': ''50%'',
''top'': ''50%''
});
this.css({
''margin-left'': -this.outerWidth() / 2 + ''px'',
''margin-top'': -this.outerHeight() / 2 + ''px''
});
return this;
}
Aquí está mi versión. Puedo cambiarlo después de ver estos ejemplos.
$.fn.pixels = function(property){
return parseInt(this.css(property));
};
$.fn.center = function(){
var w = $($w);
return this.each(function(){
$(this).css("position","absolute");
$(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels(''padding-top'') + $(this).pixels(''padding-bottom'')) / 2) + w.scrollTop() + "px");
$(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels(''padding-left'') + $(this).pixels(''padding-right'')) / 2) + w.scrollLeft() + "px");
});
};
El componente de transición de esta función funcionó muy mal para mí en Chrome (no probé en ningún otro lugar). Cambiaría el tamaño de la ventana un poco y mi elemento se movería lentamente, tratando de alcanzarlo.
Así que la siguiente función comenta que parte. Además, agregué parámetros para pasar los booleanos opcionales de x & y, si desea centrar verticalmente pero no horizontalmente, por ejemplo:
// Center an element on the screen
(function($){
$.fn.extend({
center: function (x,y) {
// var options = $.extend({transition:300, minX:0, minY:0}, options);
return this.each(function() {
if (x == undefined) {
x = true;
}
if (y == undefined) {
y = true;
}
var $this = $(this);
var $window = $(window);
$this.css({
position: "absolute",
});
if (x) {
var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
$this.css(''left'',left)
}
if (!y == false) {
var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();
$this.css(''top'',top);
}
// $(this).animate({
// top: (top > options.minY ? top : options.minY)+''px'',
// left: (left > options.minX ? left : options.minX)+''px''
// }, options.transition);
return $(this);
});
}
});
})(jQuery);
Esto es genial. He añadido una función de devolución de llamada
center: function (options, callback) {
if (options.transition > 0) {
$(this).animate(props, options.transition, callback);
} else {
$(this).css(props);
if (typeof callback == ''function'') { // make sure the callback is a function
callback.call(this); // brings the scope to the callback
}
}
Esto no se ha probado, pero algo como esto debería funcionar.
var myElement = $(''#myElement'');
myElement.css({
position: ''absolute'',
left: ''50%'',
''margin-left'': 0 - (myElement.width() / 2)
});
Estoy ampliando la gran respuesta dada por @TonyL. Estoy agregando Math.abs () para envolver los valores, y también tengo en cuenta que jQuery podría estar en modo "sin conflicto", como por ejemplo en WordPress.
Recomiendo que envuelva los valores superior e izquierdo con Math.abs () como lo he hecho a continuación. Si la ventana es demasiado pequeña y el cuadro de diálogo modal tiene un cuadro de cierre en la parte superior, esto evitará el problema de no ver el cuadro de cierre. La función de Tony habría tenido valores potencialmente negativos. Un buen ejemplo de cómo termina con valores negativos es si tiene un gran diálogo centrado pero el usuario final ha instalado varias barras de herramientas y / o ha aumentado su fuente predeterminada. En ese caso, el cuadro de cierre en un diálogo modal (si en la parte superior) puede no ser visible y hacer clic.
La otra cosa que hago es acelerar esto un poco almacenando en caché el objeto $ (ventana) para reducir los recorridos de DOM adicionales, y uso un CSS de clúster.
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
''position'':''absolute'',
''top'':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
''left'':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
Para usarlo, harías algo como:
jQuery(document).ready(function($){
$(''#myelem'').center();
});
Hay muchas maneras de hacer esto. Mi objeto se mantiene oculto con la pantalla: ninguno solo dentro de la etiqueta BODY, por lo que el posicionamiento es relativo al BODY. Después de usar $ ("# object_id"). Show () , llamo a $ ("# object_id"). Center ()
Utilizo posición: absoluta porque es posible, especialmente en un dispositivo móvil pequeño, que la ventana modal sea más grande que la ventana del dispositivo, en cuyo caso parte del contenido modal podría ser inaccesible si se arreglara el posicionamiento.
Aquí está mi sabor basado en las respuestas de otros y mis necesidades específicas:
$.fn.center = function () {
this.css("position","absolute");
//use % so that modal window will adjust with browser resizing
this.css("top","50%");
this.css("left","50%");
//use negative margin to center
this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");
//catch cases where object would be offscreen
if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});
return this;
};
Lo que tengo aquí es un método de "centro" que garantiza que el elemento que está intentando centrar no sea solo de posicionamiento "fijo" o "absoluto", sino que también garantiza que el elemento que está centrando sea más pequeño que su elemento principal, este centro y el elemento relativo a es padre, si el elemento padre es más pequeño que el elemento en sí, arrastrará el DOM al siguiente padre y lo centrará en relación con eso.
$.fn.center = function () {
/// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>
var element = $(this),
elementPos = element.css(''position''),
elementParent = $(element.parent()),
elementWidth = element.outerWidth(),
parentWidth = elementParent.width();
if (parentWidth <= elementWidth) {
elementParent = $(elementParent.parent());
parentWidth = elementParent.width();
}
if (elementPos === "absolute" || elementPos === "fixed") {
element.css(''right'', (parentWidth / 2) - elementWidth / 2 + ''px'');
}
};
Me gusta agregar funciones a jQuery por lo que esta función ayudaría:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
Ahora solo podemos escribir:
$(element).center();
Demo: Fiddle (con parámetro añadido)
Me gustaría corregir un problema.
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
El código anterior no funcionará en los casos en que this.height (supongamos que el usuario cambia el tamaño de la pantalla y el contenido es dinámico) y scrollTop() = 0 , ejemplo:
window.height es 600
this.height es 650
600 - 650 = -50
-50 / 2 = -25
Ahora el cuadro está centrado -25 fuera de pantalla.
No creo que sea mejor tener una posición absoluta si quieres un elemento siempre centrado en el centro de la página. Probablemente quieras un elemento fijo. Encontré otro plugin de centrado de jquery que usaba posicionamiento fijo. Se llama centro fijo .
No hay necesidad de jQuery para esto.
Utilicé esto para centrar el elemento Div. Estilo CSS,
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Elemento abierto
$(document).ready(function(){
$(".open").click(function(e){
$(".black_overlay").fadeIn(200);
});
});
Normalmente, solo haría esto con CSS ... pero como te pedí una forma de hacerlo con jQuery ...
El siguiente código centra un div tanto horizontal como verticalmente dentro de su contenedor:
$("#target").addClass("centered-content")
.wrap("<div class=''center-outer-container''></div>")
.wrap("<div class=''center-inner-container''></div>");
body {
margin : 0;
background: #ccc;
}
.center-outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
}
.center-inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>
(ver también este violín )
Para centrar el elemento en relación con la ventana de visualización del navegador (ventana), no use position: absolute , el valor de posición correcto debe ser fixed (absoluto significa: "El elemento está posicionado en relación con su primer elemento ancestral posicionado (no estático)") .
Esta versión alternativa del complemento del centro propuesto utiliza "%" en lugar de "px", por lo que cuando cambia el tamaño de la ventana, el contenido se mantiene centrado:
$.fn.center = function () {
var heightRatio = ($(window).height() != 0)
? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0)
? this.outerWidth() / $(window).width() : 1;
this.css({
position: ''fixed'',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
Debe colocar el margin: 0 para excluir los márgenes de contenido del ancho / alto (ya que estamos usando la posición fija, tener márgenes no tiene sentido). De acuerdo con jQuery, el documento que usa .outerWidth(true) debería incluir márgenes, pero no funcionó como se esperaba cuando lo probé en Chrome.
El 50*(1-ratio) proviene de:
Ancho de la ventana: W = 100%
Ancho del elemento (en%): w = 100 * elementWidthInPixels/windowWidthInPixels
Que calculen la izquierda centrada:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
Podrías usar la propiedad de translate CSS:
position: absolute;
transform: translate(-50%, -50%);
Lea esta publicación para más detalles.
Por favor use esto:
$(window).resize(function(){
$(''.className'').css({
position:''absolute'',
left: ($(window).width() - $(''.className'').outerWidth())/2,
top: ($(window).height() - $(''.className'').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
Puedes usar CSS solo para centrar así:
.center{
position: absolute;
height: 50px;
width: 50px;
background:red;
top:calc(50% - 50px/2); /* height divided by 2*/
left:calc(50% - 50px/2); /* width divided by 2*/
}
<div class="center"></div>
calc() te permite hacer cálculos básicos en css.
Documentación MDN para calc()
Tabla de soporte del navegador
Recomendaría la utilidad jQueryUI Position.
$(''your-selector'').position({
of: $(window)
});
Lo que te da muchas más posibilidades que solo centrar ...
Yo usaría la función de position interfaz de usuario jQuery .
<div id="test" style="position:absolute;background-color:blue;color:white">
test div to center in window
</div>
Si tengo un div con id "prueba" para centrar, la siguiente secuencia de comandos centrará el div en la ventana del documento listo. (los valores predeterminados para "mi" y "en" en las opciones de posición son "centro")
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
está obteniendo una transición pobre porque está ajustando la posición del elemento cada vez que se desplaza el documento. Lo que quieres es usar posicionamiento fijo. Probé el complemento del centro fijo que se indica arriba y parece que solucionó el problema muy bien. La posición fija le permite centrar un elemento una vez, y la propiedad CSS se encargará de mantener esa posición cada vez que se desplace.
yo uso esto:
$(function() {
$(''#divId'').css({
''left'' : ''50%'',
''top'' : ''50%'',
''position'' : ''absolute'',
''margin-left'' : -$(''#divId'').outerWidth()/2,
''margin-top'' : -$(''#divId'').outerHeight()/2
});
});
Pongo un plugin jquery aquí
Muy corta versión
$(''#myDiv'').css({top:''50%'',left:''50%'',margin:''-''+($(''#myDiv'').height() / 2)+''px 0 0 -''+($(''#myDiv'').width() / 2)+''px''});
VERSION CORTA
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:''absolute'', margin:0, top: (top > 0 ? top : 0)+''px'', left: (left > 0 ? left : 0)+''px''});
});
}
});
})(jQuery);
Activado por este código:
$(''#mainDiv'').center();
VERSION PLUGIN
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // Default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minX:0, // pixel, minimum left element value
minY:0, // pixel, minimum top element value
withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {position:''absolute''};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top+''px''});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left+''px''});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);
Activado por este código:
$(document).ready(function(){
$(''#mainDiv'').center();
$(window).bind(''resize'', function() {
$(''#mainDiv'').center({transition:300});
});
);
está bien ?
ACTUALIZACIÓN:
De CSS-Tricks
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
MI ACTUALIZACIÓN PARA TONY L''S RESPUESTA Esta es la versión modificada de su respuesta que uso religiosamente ahora. Pensé que lo compartiría, ya que le agrega un poco más de funcionalidad para varias situaciones que pueda tener, como diferentes tipos de position o solo desea el centrado horizontal / vertical en lugar de ambos.
center.js:
// We add a pos parameter so we can specify which position type we want
// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
this.css("position", pos);
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it vertically only
jQuery.fn.centerVer = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
return this;
}
En mi <head> :
<script src="scripts/center.js"></script>
Ejemplos de uso:
$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")
$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")
$("#example5").center("absolute")
$("#example6").center("fixed")
Funciona con cualquier tipo de posicionamiento, y se puede usar en todo su sitio fácilmente, así como fácilmente portátil a cualquier otro sitio que cree. No más soluciones molestas para centrar algo correctamente.
Espero que esto sea útil para alguien por ahí! Disfrutar.
Solución CSS solo en dos líneas
Centraliza tu div interior horizontal y verticalmente.
#outer{
display: flex;
}
#inner{
margin: auto;
}
para solo alinear horizontalmente, cambiar
margin: 0 auto;
y para vertical, cambio.
margin: auto 0;