¿Cómo centro el contenido absolutamente posicionado de ancho desconocido?

Question

Antes de que alguien me pregunte por qué demonios me gustaría hacer esto, permítame salir y decírselo. De esa forma, uno de ustedes, inteligente, asoma por ahí puede decirme una manera mucho mejor ...

Estoy haciendo un visor para las pinturas que deben estirarse para llenar la página, bien el 90% de la altura de la pantalla preciso. Quiero desvanecer las pinturas una encima de la otra y quiero centrarlas en el centro de la pantalla.

Para fundir las pinturas una sobre otra, necesito colocarlas 'absolutas' para evitar que se apilen. Aquí es donde viene el problema. Desde que los configuré en modo absoluto, todos los métodos que uso para centrar el contenido div no han funcionado.

Parte del problema es que no estoy estableciendo ningún ancho para las pinturas, ya que quiero que se dimensionen dinámicamente para ocupar el 90% de la pantalla del usuario.

He encontrado cientos de métodos para centrar el contenido absoluto y creo que podría ser necesario reducir el contenido del div que contiene. Sin embargo, aún no he tenido éxito.

en HTML

<div id="viewer_div"> 
    <img src="" id="first" /> 
    <img id="second" class="hidden"/> 
</div> 

hoja de estilos

#viewer_div { 
     width:1264px; 
} 


img { 
    height:90%; 
    display:block; 
    margin-left: auto; 
    margin-right:auto; 
} 

Lo anterior me da el efecto deseado, pero no me permite a la posición de las imágenes absoluta. ¿Alguien puede sugerir una manera de centrar las imágenes pero también me permite desvanecer una sobre otra?

Answer 1

O bien utilizar JavaScript para calcular el ancho y moverlo,

usar un hack CSS para mover el elemento de la derecha y la izquierda en un 50%,

o no absolutamente posicionarlo.

---

Esta respuesta es increíblemente corta, pero va al grano. Si necesita que se centralice algo (lo que significa que desea que el navegador determine dónde se encuentra el punto central y lo coloca allí), no puede usar el posicionamiento absoluto, porque eso le quita el control al navegador.

---

a desaparecer las pinturas de uno sobre el otro que necesito para posicionarlas 'absoluto' para que dejen de apilamiento.

Aquí es donde reside su problema. Ha supuesto que necesita posicionamiento absoluto por el motivo equivocado.

Si está experimentando problemas de la colocación de los elementos en la parte superior de la otra, envolver las imágenes en un recipiente con posición absoluta que es 100% de ancho y tiene text-align: center

---

Si siente que el posicionamiento absoluto es es necesario, este truco puede ser utilizado para lograr los resultados deseados:

div { 
    position: absolute; 
    /* move the element half way across the screen */ 
    left: 50%; 
    /* allow the width to be calculated dynamically */ 
    width: auto; 
    /* then move the element back again using a transform */ 
    transform: translateX(-50%); 
} 

Obviamente, el truco anterior tiene un terrible code smell, pero funciona s en algunos navegadores. Tenga en cuenta que este truco no es necesariamente obvio para otros desarrolladores u otros navegadores (especialmente IE o dispositivos móviles).

Answer 2

Empujando el elemento left por 50% de su ancho y luego traduciéndolo horizontalmente por 50% ha funcionado para mí.

.element { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

me encontré con el concepto en el siguiente enlace, y luego traduje para adaptarse a mi alineación horizontal necesita: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css

Answer 3

Para ir fuera de la respuesta de Samec, también se puede usar esto para centrar un elemento de posición absoluta vertical y horizontalmente de dimensiones desconocidas:

#viewer_div { 
    position: relative; 
} 
#viewer_div img { 
    position: absolute; 
    left: 50%; 
    top: 0%; 
    transform: translate(-50%, 50%); 
}