Cómo centrar un DIV con un tamaño desconocido horizontal y verticalmente en la pantalla

Necesito centrar un DIV en el centro fuera de la pantalla, tanto horizontal como verticalmente, no conozco el tamaño DIV, y el div es position:fixed;.Cómo centrar un DIV con un tamaño desconocido horizontal y verticalmente en la pantalla

Este truco de margen negativo no funciona, porque no conozco el tamaño de div. top:50%; left:50%; magin-top:-100; margin-left:-100;

El margin-left: auto; margin-right: auto; no funciona porque no funciona con position:fixed; y margin-top:auto; margin-bottom:auto; tampoco verticalmente central;

Encontré que este método: display: table-cell; vertical-align: middle; no funciona éter;

Sé cómo hacer esto con JavaScript usando getComputedStyle para obtener el tamaño de contenido div, y hacer los cálculos para corregirlo, pero quiero una solución de CSS puro, porque no quiero activar un JS cada vez mi contenido div cambia.

Fuente

2012-05-20 Vitim.us

¿Y cómo está cambiando el contenido de 'div'? A través de animación CSS simple o animaciones de JavaScript? – balexandre

@balexandre no hay animación, cambios de contenido a través de Ajax –

¿Funcionaría algo como esto? También usa display: table-cell pero requiere 2 etiquetas div para funcionar ... la etiqueta principal tiene un estilo display: table especificado.

NB: He añadido z-index:-1; a la clase de base central. Es posible que desee ajustar esto en función de su diseño.

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

Si necesita añadir texto que no está alineado centro dentro de la centerpane, se puede añadir otro div dentro de la centerpane y especificar el estilo como algo parecido a: text-align:left; width:400px; margin:0px auto; Tendrá que especificar un ancho de este div adicional .

Fuente

2012-05-20 06:31:38 signal2013

Mire demo (la altura es desconocida, el ancho está establecido).

Puede usar tablas css (en este ejemplo, html es la tabla mientras que body es una celda de tabla). Marcado:

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

CSS:

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

¿Necesita una solución para IE < = 7 (desde IE < = 7 no sabe nada de la tabla | table-cell)?

Fuente

2012-05-20 08:31:57 roger

Solo necesito compatibilidad con navegadores compilant. ¿Cambiar los estilos html y body no se mete con otro contenido en línea en la página, o funciona con un envoltorio div? –

Puede centrar verticalmente un cuadro con una altura desconocida con la ayuda de tablas css. La altura de la caja está determinada por su contenido. Consulte esto demo que usa la posición : propiedad fija para el cuadro. El ancho de la caja también se establece en.

Y esta es la solución para IE < = 7:

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

¿Este a sus exigencias?

Fuente

2012-05-20 17:28:03

Si está trabajando con posiciones, las propiedades de transformación serán útiles aquí.

Sólo hay que añadir las propiedades siguientes para el elemento que ha de centrado,

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

Por favor, retire el margen extra y el relleno añadido al elemento.

Fuente

2017-04-19 11:00:23

Cómo centrar un DIV con un tamaño desconocido horizontal y verticalmente en la pantalla

Respuesta

Cuestiones relacionadas