Cómo centrar un elemento de "posición: absoluta"

Tengo problemas para centrar un elemento que tiene el atributo positionestablecido en absolute. ¿Alguien sabe por qué las imágenes no están centradas?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
      <li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Expandir fragmento

Dec 14 '11 23:12 user1098278

Si ha establecido un ancho, puede usar:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

Aug 28 '2013 11:08 baaroz

Sin conocer el width/ heightdel elemento ¹ posicionado , aún es posible alinearlo de la siguiente manera:

EJEMPLO AQUÍ

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Vale la pena señalar que CSS Transform es compatible con IE9 y superiores . (Los prefijos de proveedores se omiten por motivos de brevedad)

Explicación

Agregar top/ leftof 50%mueve el borde del margen superior/izquierdo del elemento al centro del padre, y translate()la función con el valor (negativo)-50% de mueve el elemento a la mitad de su tamaño. Por lo tanto, el elemento se colocará en el medio.

Esto se debe a que un valor porcentual en top/ leftproperties es relativo a la altura/ancho del elemento principal (que crea un bloque contenedor).

Mientras que un valor porcentual en la función de transformación es relativo al ancho/alto del elemento en sí (en realidad se refiere al tamaño del cuadro delimitador ) .translate()

Para alineación unidireccional, utilice translateX(-50%)o translateY(-50%)en su lugar.

^{1. Un elemento con positionotro distinto de static. Es decir relative, absolutevalores fixed.}

Sep 10 '2014 22:09 Hashem Qolami

Centrar algo absoluteen una posición determinada es bastante complicado en CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Cambie margin-lefta (negativo) la mitad del ancho del elemento que está intentando centrar.

Dec 14 '2011 16:12 bookcasey

Div centro alineado vertical y horizontalmente

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Nota: Los elementos deben tener ancho y alto para ser configurados.

Jan 28 '2014 10:01 Sebin Simon

Si quieres centrar un elemento absoluto

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Si desea que un contenedor esté centrado de izquierda a derecha, pero no de arriba a abajo

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Si desea que un contenedor esté centrado de arriba hacia abajo, independientemente de que esté de izquierda a derecha

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Actualización al 15 de diciembre de 2015

Bueno, aprendí este otro truco nuevo hace unos meses. Suponiendo que tiene un elemento padre relativo.

Aquí va tu elemento absoluto.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Con esto, creo que es una mejor respuesta que mi antigua solución. Ya que no es necesario especificar ancho Y alto. Éste adapta el contenido del propio elemento.

Actualización al 23 de abril de 2021

No responde a la pregunta de OP sobre la posición absoluta, pero si desea una solución alternativa, existe esta llamada flexbox. He aquí un ejemplo.

#parent {
    display:flex;
    align-items:center;
    justify-content:center;
}

Lo que hace es convertir el contenedor flexy alinear los elementos secundarios para centrarlos en horizontal usando justify-content:centery vertical usando align-items:center. También es compatible con navegadores modernos, por lo que su uso es seguro.

Sin embargo, asegúrese de leer primero cómo funciona Flexbox.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Navegadores compatibles con Flexbox

https://caniuse.com/flexbox

May 24 '2014 01:05 Brian Coolidge