¿Cómo centrar el elemento en posición absoluta en div?

1078

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

Intenté esto Pero debe ajustarse ya que el ancho responde.

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

¿Algunas ideas?

css  css-position  center  absolute 
— Ish
fuente
44
Tiene un ejemplo en ejemplos de centro absoluto que se puede generalizar en diferentes situaciones.
— Mihai8
2
Hay una mejor respuesta a esta pregunta en stackoverflow.com/questions/17976995/…
— Andrew Swift

Respuestas:

1333 

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>
Expandir fragmento

— bobince
fuente
76
Increíble. ¡Trabajó para mi! Un problema que tuve: la imagen que estaba centrando era bastante grande, esto causó que el div externo fuera más allá del borde derecho de la página y causara desplazamiento horizontal. Cambié la propiedad css "izquierda" por "derecha", y hasta ahora funciona mejor, ya que pasar por el borde izquierdo de la pantalla no causa desplazamiento
— BoomShaka
¿Qué pasa si el usuario ha desplazado la página hacia abajo, aparece una superposición en la parte superior, cree que será una buena idea usar jquery para solucionar el problema de desplazamiento
— PUG
1
una solución para la cuestión de desplazamiento puede ser position: fixed, pero lo que si la altura es desconocida de superposición, las barras de desplazamiento de superposición tendrá que ser implementada
— PUG
3
Hay un problema menor que encontré al usar esta técnica. Debido a que el div externo ocupa el 50% de la pantalla, se producen algunos cambios cuando el texto es más ancho que el 50% del tamaño de la pantalla. Resolví esto estableciendo el div externo en "ancho: 100%" y eliminando la propiedad izquierda. Para el div interno, simplemente configuro mi alineación de texto al centro. Esto resuelve el problema.
— Nicky L.
3
El porcentaje de altura es relativo al bloque contenedor, en este caso <html>. Pero el <html>elemento no tiene un heightespecificado, por lo que toma la altura de todo el contenido del documento, lo que no es nada porque el único contenido está en una posición absoluta (sacado del flujo de contenido). Agregar height: 100%al <html>elemento hace una diferencia en esto.
— bobince
1801

Esto funciona para mi:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
Expandir fragmento

— Matthias Weiler
fuente
36
Solo quiero transmitir que los márgenes negativos son CSS perfectamente válidos y no deben verse como un "truco sucio". Los márgenes negativos se mencionan en la especificación del modelo de caja W3C. Algunas personas parecen decidir arbitrariamente que es un hack porque a) son ignorantes para ellos, o b) los están usando para reparar su CSS incorrecto.
— Joseph Ravenwolfe
58
se debe establecer el ancho del div a centrar: no funcionará automáticamente con, por ejemplo, un botón con texto.
— Stefan
2
@Joshua Esto solo se centrará horizontalmente, no verticalmente como la otra respuesta.
— Ygoe
3
Prefiero esta solución, ya que no aumenta el tamaño de la ventana gráfica.
— iceydee
13
Para compatibilidad entre navegadores: widthdebe establecerse en un valor específico para que esto funcione. autoy 100%no centrará el elemento. display: block;es un deber. position: absolute;NO es un deber. Todos los valores funcionarán. El elemento padre positiondebe establecerse en algo diferente a static. Configuración lefty rightpara 0es innecesario. margin-left: auto; margin-right: auto;Hará el trabajo.
— Onur Yıldırım
767

Solución receptiva

Aquí hay una buena solución para un diseño receptivo o dimensiones desconocidas en general si no necesita admitir IE8 y versiones inferiores.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Mostrar fragmento de código

Aquí hay un violín JS

La pista es que left: 50%es relativa al padre mientras que eltranslate transformación es relativa al ancho / alto de los elementos.

De esta manera, tiene un elemento perfectamente centrado, con un ancho flexible tanto en el elemento secundario como en el principal. Bonificación: esto funciona incluso si el niño es más grande que el padre.

También puede centrarlo verticalmente con esto (y nuevamente, el ancho y la altura del padre y el niño pueden ser totalmente flexibles (y / o desconocidos)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Tenga en cuenta que es posible que también necesite un transformprefijo de proveedor. Por ejemplo-webkit-transform: translate(-50%,-50%);

— Problemas de Sumum
fuente
26
Con el soporte de IE7 ya no es necesario, esta debería ser la solución de facto. Esta solución es mejor que la técnica izquierda: 0 / derecha: 0, ya que eso hace que los elementos sean de ancho completo, mientras que esto conserva el ancho y funciona en elementos de anchos desconocidos.
— aleemb
51
Con mucho, la mejor respuesta, esto funciona si el cuadro en el que está contenido el div es más pequeño que el hijo.
— Caso
2
@ChadJohnson, por supuesto que sí. Pruébelo con el webkit-prefijo que le sugerí.
— ProblemsOfSumit
2
Ah, me perdí tu nota sobre -kit web. Increíble.
— Chad Johnson
3
transform: translateparece hacer position: fixedinutilizable en niños. La respuesta aceptada funciona mejor en este caso.
— dmvianna 01 de
49

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

Tomando widthcomo 900px.

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

En este caso, uno debe saber de widthantemano.

— pratikabu
fuente
26
"because the width is unknown"... esto no responde la pregunta
— Michel Ayres
15
hola @Michel en realidad cuando buscas en Google algo relacionado con centrar el div absoluto, este enlace aparece como el primer enlace. Es por eso que agregué esta solución, en caso de que alguien como yo esté buscando la solución anterior .. :)
— pratikabu
1
No es muy útil para el diseño receptivo, pero funcionó para mí hasta que comencé a hacer diseños receptivos. Esta es una respuesta válida para centrar elementos de ancho conocidos posicionados absolutamente .
— Sean Kendle
36

Centro absoluto

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

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 :)

— Ijas Ameenudeen
fuente
Esto no funciona, compruebe el siguiente codepen codepen.io/anon/pen/YqWxjJ
— Mark
1
Lo siento, creo que esto funcionará, pero debe incluir una altura y un ancho fijos codepen.io/anon/pen/WwxEYQ
— Mark
31

este trabajo para vertical y horizontal 

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

y si desea que el elemento sea el centro del elemento primario, establezca la posición del elemento relativo relativo

 #parentElement{
      position:relative
  }

editar:

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

  • si desea que el elemento sea el centro del elemento primario, configure la posición del elemento primario como relativa

— Mohsen Abdollahi
fuente
2
Creo que necesitas agregar altura para que la vertical funcione.
— Raúl
Parece que esto se posiciona en el centro de la página, no en el centro de otro elemento.
— Günter Zöchbauer
1
@ GünterZöchbauer sí, si desea que el elemento sea el centro del elemento primario, establezca la posición del pariente principal.
— Mohsen Abdollahi el
20

Buscando una solución, obtuve las respuestas anteriores y pude hacer que el contenido se centre con la respuesta de Matthias Weiler pero usando la alineación de texto.

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

Trabajó con Chrome y Firefox.

— cavila
fuente
55
Creo que no es necesario el "text-align: center"
— Tobias
Esto solucionó mi problema aquí . ¡Gracias!
— Volomike
Necesitaba el "text-align: center", y esto funcionó donde la solución sugerida por @ProblemsOfSumit no funcionó ya que hizo que mi texto se ajustara.
— Nat
15

** SOLUCIÓN RESPONSABLE **

Asumiendo el elemento en el div, es otro div ...

esta solución funciona bien

<div class="container">
  <div class="center"></div>
</div>

el contenedor puede ser de cualquier tamaño (debe ser relativo a la posición)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

El elemento ( div ) también puede ser de cualquier tamaño (debe ser más pequeño que el contenedor )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

El resultado se verá así. Ejecute el fragmento de código

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}
<div class="container">
	<div class="center"></div>
</div>
Expandir fragmento

Lo encontré muy útil

— RealMJDev
fuente
1
genio. ¿Por qué el otro no se le ocurrió esto?
— mesqueeb
Gracias, feliz codificación
— RealMJDev
13

Esta es una mezcla de otras respuestas, que funcionó para nosotros:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
— Crashalot
fuente
Buena solución gracias hombre!
— Stanley Bateswar
12

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;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>
Expandir fragmento

Lo que esto hace es decir darme a top: 50%y a left: 50%, luego transformar (crear espacio) tanto en el eje X / Y como en el-50% valor, en un sentido "crear un espacio espejo".

Como tal, esto crea un espacio igual en los 4 puntos de un div, que siempre es una caja (tiene 4 lados).

Esta voluntad:

  1. Trabaja sin tener que saber la altura / anchura de los padres.
  2. Trabaja en receptivo.
  3. Trabaja en los ejes X o Y. O ambos, como en mi ejemplo.
  4. No se me ocurre una situación en la que no funcione.
— Daniel Moss
fuente
Avíseme si encuentra una situación en la que esto no funciona para poder editar la pregunta con su aporte.
— Daniel Moss
transform / translate hará que el safari muestre texto borroso en cierta escala
— James Tan
@DanielMoss alguna razón para no usar translate(-50%,-50%);?
— Mark Baijens
12

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

Manifestación

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
— Lowtechsun
fuente
9

Flex se puede usar para centrar la posición absoluta div.

display:flex;
align-items:center;
justify-content:center;

Mostrar fragmento de código

— Dhaval Jardosh
fuente
en mi pantalla -Firefox 68.x, simplemente no se alinea, el bloque absoluto aparece en la parte inferior del bloque relativo
— Webwoman
¿Puedes probar esto display: -webkit-flex;?
— Dhaval Jardosh
7

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

Podría, si eso funciona en su escenario, colocar absolutamente un elemento invisible con un 100% de ancho y alto, y tener el elemento centrado allí usando el margen: automático y posiblemente verticalmente alineado. De lo contrario, necesitará Javascript para hacerlo.

— Pekka
fuente
+1 para la cosa "margen: automático". He intentado esto antes para centrar horizontalmente un div utilizando la línea "margin: 0 auto": el "0" se aplica a los márgenes verticales y el "auto" al horizontal. Creo que esto es lo que StackOverflow usa para el div de nivel superior para obtener los 2 bordes blancos gruesos a los lados de la página. Sin embargo, la página de W3Schools en el margen CSS establece para el valor automático que "El resultado de esto depende del navegador" - No lo he probado personalmente en muchos navegadores diferentes, por lo que realmente no puedo comentar sobre este punto (pero obviamente hace el truco en algunos de ellos)
— Steg
1
es posible para un ancho (y altura) desconocido si IE8 no es un problema. Vea mi respuesta para más detalles.
— ProblemsOfSumit
7

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

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

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

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>
— Frasco
fuente
6

Aquí hay un complemento útil de jQuery 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)
    });
};
— Ben Shelock
fuente
esta es la mejor manera, y especialmente con un diseño repsonivo.
— m4tm4t
Sería trivial si jQuery se usara en cualquier caso
— Code Whisperer
8
Esta NO es la mejor manera. Siempre es mejor usar CSS siempre que sea posible. Centrar un DIV es posible con CSS en todos los ejes y también para páginas receptivas. ¡No hay necesidad de JavaScript!
— ProblemsOfSumit
1
@yckart y en este caso la herramienta es CSS.
— ProblemsOfSumit
5

versión sass / compass de la Solución de respuesta anterior:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
— Adam Spence
fuente
44
transform: translate(-50%, -50%)hace que el texto y el resto del contenido se vean borrosos en OS X usando los navegadores webkit keithclark.co.uk/articles/gpu-text-rendering-in-webkit
— Yasha
¡Solo use el tipo de antialiasing que le guste, -webkit-font-smoothing: antialiased;lo he obtenido del artículo que publicó por cierto!
— Adam Spence
4

Mi método de centrado preferido:

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

JS Violín aquí

— vp_arth
fuente
4

Esto funcionó para mí:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
— Alan
fuente
Es la respuesta de @Matthias Weiler 5 años después.
— aloisdg se muda a codidact.com el
3

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

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
— Dustin Poissant
fuente
3 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
— Burcu AKCAOGLU
fuente
2

Esta solución funciona si el elemento tiene widthyheight 

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>
Expandir fragmento

— Mes.
fuente
2

la solución de esta pregunta no funcionó para mi caso. Estoy haciendo un subtítulo para algunas imágenes y resolví usar esto

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>
Expandir fragmento

— Marcogomesr
fuente
1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

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í

1

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

Puntos y rayas

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Limpiador

Wow, esos cinco años pasaron volando, ¿no?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Señor b
fuente
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
— AndreyP
fuente
0

Puede colocar la imagen en un div y agregar un id de div y hacer que el CSS para ese div tenga un text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}
— Dworvin Vonstrangle
fuente
0 

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
Expandir fragmento

— amit bende
fuente
0

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

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Se puede agregar una propiedad de alineación de texto 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.

— Terence Bandoian
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.