html - justificar - centrar texto css

Alinear al centro en una divinidad absolutamente posicionada

Question

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 ;

Answer 1

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, intente 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>

Answer 2

Sé que llego tarde a la fiesta, pero pensé que daría una respuesta aquí para las personas que necesitan posicionar horizontalmente un artículo absoluto, cuando no se conoce 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, cuando es posible que necesite alineación vertical, simplemente ajustando las propiedades de esta manera:

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

Answer 3

Sí:

div#thing { text-align:center; }

Answer 4

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

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

Recuerde que para posicionar un elemento en forma absoluta, el elemento padre debe estar ubicado relativamente.

Answer 5

Su problema puede ser resuelto 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%;
}

Answer 6

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