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