Centro Alinear en un Div Absolutamente Posicionado


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;

Author: Hakam Fostok, 2008-10-31

6 answers

Su problema puede resolverse si le da a su div un ancho fijo, de la siguiente manera:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}
 145
Author: JacobE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-24 16:54:27
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}
 93
Author: Matheus Oliveira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-10 17:45:43

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

Prueba esto:

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

La misma técnica también se puede aplicar, para cuando pueda necesitar alineación vertical, simplemente ajustando las propiedades de la siguiente manera:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 28
Author: Michael Giovanni Pumo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-24 16:54:50

Si es necesario que tenga un ancho relativo (en porcentaje), puede envolver su div en una posición absoluta:

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

Recuerde que para posicionar un elemento absolutamente, el elemento padre debe posicionarse relativamente.

 0
Author: dalvallana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-21 11:40:49

Estaba teniendo el mismo problema, y mi limitación era que no puedo tener un ancho predefinido. Si su elemento no tiene un ancho fijo, pruebe esto

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

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

Luego modifica tu 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>
 0
Author: Usman Shaukat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-11 19:40:57

Sí:

div#thing { text-align:center; }
 -23
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-01-15 15:14:56