Centro de alineación en una división absolutamente posicionada

93

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

El div está en la parte superior, pero no puedo centrarlo con <center>o margin: 0 auto;

html css xhtml Steve
fuente

152

Su problema puede resolverse si le da divun ancho fijo, de la siguiente manera:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

JacobE
fuente

1

No sé por qué no pensé en eso, a pesar de que usamos la misma técnica para el centrado vertical todo el tiempo ... Gracias de todos modos, me ahorraste mucho tiempo.

Aayush

1

¿Qué pasa si el usuario se ha desplazado verticalmente hacia abajo? El div aparece en la parte superior de la página mientras debería aparecer en el área visible

PUG

Estoy mostrando miniaturas de imágenes redimensionadas dinámicamente en mi div de superposición, por lo que no sé el ancho.

PUG

4

esto es solo una solución, stackoverflow.com/questions/1776915/… parece ser la solución

PUG

1

Esta no es la respuesta correcta. Los diferentes tipos de medios no admitirán este fragmento.

Sushan

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

Matheus Oliveira
fuente

3

¿Como funciona esto? ¿Puede explicar por qué su respuesta es válida?

afuzzyllama

1

Realmente me gusta este método sobre otros el 99% de las veces, no tienes que lidiar con el relleno, los bordes, etc. Nunca he visto que esto falle, la próxima vez da un ejemplo si falla para ti.

Dan

1

Lo bueno de esta solución es que también funciona con porcentajes, pero no estoy seguro de si es compatible con

varios

1

Guau. No esperaba que esto funcionara, pero funcionó para mí como un encanto

Awais Umar

4

Estoy de acuerdo en que esta debería ser la respuesta correcta, un margen de -200px me grita hackeo.

Mani5556

36

Sé que llego tarde a la fiesta, pero pensé en proporcionar una respuesta aquí para las personas que necesitan colocar horizontalmente un elemento absoluto, cuando no conocen su ancho exacto.

Prueba esto:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

También se puede aplicar la misma técnica, para cuando necesite una alineación vertical, simplemente ajustando las propiedades de esta manera:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Michael Giovanni Pumo
fuente

1

Whaaat. ¡Esto es asombroso! ¿Podrías explicar cómo funciona? Editar: Hice algo de caza y parece que la izquierda: el 50% mueve la ubicación izquierda del div hacia el centro, que no es realmente el centro. Pero el translateX lo retrasa el 50% del ancho del contenido

Aziz Javed

2

El posicionamiento absoluto se colocará desde la parte superior izquierda de un elemento. El uso de translate lo cambiará a la cantidad relativa a su tamaño.

Michael Giovanni Pumo

3

Michael, solo quería que supieras que no llegaste tarde a la fiesta ... y para los que no lo sepan: transform: translate (-50%, -50%); hace el centrado vertical y horizontal con 1 línea

Marvel Moe

4

Para centrarlo tanto vertical como horizontalmente, haga esto:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Armin
fuente

0

Si es necesario que tenga un ancho relativo (en porcentaje), puede envolver su div en uno posicionado absoluto:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Recuerde que para posicionar un elemento de forma absoluta, el elemento padre debe posicionarse relativamente.

dalvallana
fuente

0

Tenía el mismo problema y mi limitación era que no puedo tener un ancho predefinido. Si su elemento no tiene un ancho fijo, intente esto

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

luego modifique su html para que se vea así

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

Usman Shaukat
fuente

0

O puede usar unidades relativas, p. Ej.

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

Aliaksei
fuente

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Expandir fragmento

panwar
fuente

-22

Si:

div#thing { text-align:center; }

fuente

5

Esto alineará el contenido dentro de un div. No alineará el div en el centro de la página. Tampoco alineará un div absolutamente posicionado de ninguna otra manera que no sea el contenido dentro de él que es parte del flujo del documento.

CarterMan

Centro de alineación en una división absolutamente posicionada

Respuestas: