¿Cómo centrar el elemento absolutamente posicionado en div?

Necesito colocar un elemento div (con position:absolute; ) en el centro de mi ventana. Pero estoy teniendo problemas para hacerlo, porque el ancho es desconocido .

Intenté esto. Pero debe ajustarse ya que el ancho es sensible.

 .center { left: 50%; bottom:5px; } 

¿Algunas ideas?

  
I am some centered shrink-to-fit content!
tum te tum

Esto funciona para mí:

 #content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ } 
  
I'm the content

Solución receptiva

Aquí hay una buena solución para el diseño receptivo o dimensiones desconocidas en general si no necesita soportar IE8 y menos.

 .centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0); } 
 .outer { position: relative; /* or absolute */ /* unnecessary styling properties */ margin: 5%; width: 80%; height: 500px; border: 1px solid red; } .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* unnecessary styling properties */ max-width: 50%; text-align: center; border: 1px solid blue; } 
 
I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

Muy buena publicación .. Solo quería agregar si alguien quiere hacerlo con una sola etiqueta div, aquí está la salida:

Tomando width como 900px .

 #styleName { position: absolute; left: 50%; width: 900px; margin-left: -450px; } 

En este caso, uno debe saber el width antemano.

Centro Absoluto

HTML:

 

CSS:

 .parent { position: relative; } .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 

Demostración: http://jsbin.com/rexuk/2/

Probado en Google Chrome, Firefox e IE8

Espero que esto ayude 🙂

este trabajo para vertical y horizontal

  #myContent{ position: absolute; left: 0; right: 0; top:0; bottom:0; margin: auto; } 

y si desea hacer que el elemento sea el centro del elemento principal, establezca la posición del pariente

  #parentElement{ position:relative } 

editar:

  • para el centro vertical, alinee la altura del conjunto con su elemento. gracias a @Raul

  • si quiere hacer el elemento centro de la matriz, establezca la posición del padre en relación

Buscando una solución obtuve las respuestas anteriores y podría hacer que el contenido esté centrado con la respuesta de Matthias Weiler pero usando text-align.

 #content{ position:absolute; left:0; right:0; text-align: center; } 

Trabajó con Chrome y Firefox.

Entiendo que esta pregunta ya tiene algunas respuestas, pero nunca he encontrado una solución que funcione en casi todas las clases que también tenga sentido y sea elegante, así que aquí está mi opinión después de ajustar un montón:

 .container { position: relative; } .container .cat-link { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); z-index: 100; text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */ background-color: white; } .color-block { height: 250px; width: 100%; background-color: green; } 
  

Hasta donde yo sé, esto es imposible de lograr para un ancho desconocido.

Podría – si eso funciona en su escenario – posicionar un elemento invisible con 100% de ancho y alto, y tener el elemento centrado allí usando margin: auto y posiblemente vertical-align. De lo contrario, necesitarás Javascript para hacer eso.

Me gustaría agregar a la respuesta de @ bobince:

  
I am some centered shrink-to-fit content!
tum te tum

Mejorado: /// esto hace que la barra de desplazamiento horizontal no aparezca con elementos grandes en el div centrado.

  
I am some centered shrink-to-fit content!
tum te tum

Aquí hay un plugin jQuery útil para hacer esto. Encontrado aquí . No creo que sea posible solo con CSS

 /** * @author: Suissa * @name: Absolute Center * @date: 2007-10-09 */ jQuery.fn.center = function() { return this.each(function(){ var el = $(this); var h = el.height(); var w = el.width(); var w_box = $(window).width(); var h_box = $(window).height(); var w_total = (w_box - w)/2; //400 var h_total = (h_box - h)/2; var css = {"position": 'absolute', "left": w_total+"px", "top": h_total+"px"}; el.css(css) }); }; 

Mi método de centrado preferido:

 position: absolute; margin: auto; width: x% 
  • posicionamiento absoluto del elemento de bloque
  • margen automático
  • mismo izquierdo / derecho, arriba / abajo

JSFiddle aquí

versión sass / compass de la solución receptiva anterior:

 #content { position: absolute; left: 50%; top: 50%; @include vendor(transform, translate(-50%, -50%)); } 

Esto funcionó para mí:

 

Sé que ya proporcioné una respuesta, y mi respuesta anterior, junto con otras dadas, funcionan muy bien. Pero he usado esto en el pasado y funciona mejor en ciertos navegadores y en ciertas situaciones. Así que pensé en dar esta respuesta también. No “edité” mi respuesta anterior y la agregué porque creo que esta es una respuesta completamente separada y las dos que proporcioné no están relacionadas.

HTML:

 

CSS:

 #parent { display: table; } #child { display: table-cell; vertical-align: middle; } 
 #container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; } 

Funciona en cualquier ancho aleatorio desconocido del elemento de posición absoluta que desea tener en el centro del elemento contenedor.

Manifestación

 
.container { position: relative; width: 100%; } .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; }

HTML:

 
content

CSS:

 .wrapper { position: relative; width: 200px; height: 200px; background: #ddd; } .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; background: #ccc; } 

Esto y más ejemplos aquí

HTML

 

CSS

 #parent { position: relative; } #centered-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } 

http://jsfiddle.net/f51rptfy/

Este es un truco que descubrí para hacer que un DIV flote exactamente en el centro de una página. Realmente feo, por supuesto, pero funciona en todos

Puntos y rayas

 
Perfectly Centered Content

Limpiador

Vaya que pasaron cinco años, ¿no?

 

Stays in the Middle

Puede colocar la imagen en un div y agregar una identificación div y tener el CSS para ese div tener un text-align:center

HTML:

 
http://sofes.miximages.com/css/

CSS:

 #intro_img { text-align:center; } 
 #content { margin:0 auto; display:table; float:none;} 
  
I'm the content

Un enfoque simple que funcionó para mí para centrar horizontalmente un bloque de ancho desconocido:

 

 #wrapper { position: absolute; width: 100%; text-align: center; } #block { display: inline-block; } 

Se puede agregar una propiedad text-align al conjunto de reglas #block para alinear su contenido independientemente de la alineación del bloque.

Esto funcionó en versiones recientes de Firefox, Chrome, IE, Edge y Safari.

He usado una solución similar:

 #styleName { position: absolute; margin-left: -"X"px; } 

Donde “X” es la mitad del ancho de un div que quiero mostrar. Funciona bien para mí en todos los navegadores.

Intenta no usar el lado oscuro del CSS. Evite usar valores negativos para los márgenes. Sé que a veces se ven obligados a hacer cosas horribles como un margin-left: -450px , pero probablemente podrían hacer algo como right: 450px . Es solo mi forma de trabajar.

Intereting Posts