¿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

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

.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;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Expandir fragmento

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

19

Si necesita centrarse horizontal y verticalmente también:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

michal.jakubeczy
fuente

muy buena solución gracias

Stanley Bateswar

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:

Trabaja sin tener que saber la altura / anchura de los padres.
Trabaja en receptivo.
Trabaja en los ejes X o Y. O ambos, como en mi ejemplo.
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

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Expandir fragmento

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

HTML

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

CSS

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

http://jsfiddle.net/f51rptfy/

Dustin Poissant
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í

fuente

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

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

Respuestas:

Solución receptiva