¿Coloca un div en el centro pero con altura dinámica?

Quiero colocar un div en el medio de la página. La solución que encontré en Internet supone que el div será de tamaño estático. Necesito que el div esté en el medio, si el contenido es del tamaño correcto, pero si supera el tamaño del div, debería agrandarse y, finalmente, permitir el desplazamiento sin cambiar el ancho.¿Coloca un div en el centro pero con altura dinámica?

PD: No necesito soporte para IE, solo XULRunner (Firefox) y navegadores basados en Webkit.

Editar: Toda la página debe ser desplazable, no solo el contenido div. Y necesito preservar todos los saltos de línea.

How I want to do it alt text

Fuente

2010-12-22 Kristina Brooks

posible duplicado de [posición central div horizontal y vertical] (http://stackoverflow.com/questions/2726219/position-div-center-horizontal-and-vertical) – Stephen

La respuesta aceptada en la pregunta anterior debería ayudarlo. – Stephen

@Stephen No creo que sea un duplicado. –

Aquí van:

<style> 
    .container{ 
     border: 1px solid Red; 
     width: 300px; 
     height: 500px; 
     display:table-cell; 
     vertical-align:middle; 
    } 
    .content{ 
     border: 1px solid Blue; 
     width: 100px; 
     height:auto; 
     min-height: 100px; 
     max-height:200px; 
     margin-left:auto; 
     margin-right:auto; 
     overflow:auto; 
    } 
</style> 
<div class="container"> 
    <div class="content"> 
     add content here 
    </div> 
</div>

¿Cómo se ve como:

alt text

Test it.

Fuente

2010-12-22 15:40:38

+1, uso interesante de la pantalla. ¿Esto se comporta en todos los navegadores? – Stephen

@Stephen No. Solo IE8 y navegadores modernos. –

Esa solución no parece preservar los saltos de línea. –

Si no es necesario decir, el uso de soporte vertical-align propiedad:

hacen las pantallas del cuerpo como tabla
un div exterior como de células conjunto de mesa y es vertical-align como 'medio'

gustan:

<style type="text/css" media="screen"> 
    html{ 
    height: 100%; 
    } 
    body { 
    width: 100%; 
    height: 100%; 
    display: table; 
    margin: 0; 
    } 

    #div_1 { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 100%; 
    } 

    #div_2 { 
    width: 200px; 
    padding: 10px; 
    border: 1px solid black; 
    margin: auto; 
    } 

</style> 

<body> 
    <div id="div_1"> 
    <div id="div_2"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    </div> 
</body>

EDIT: Una implementación más multi-navegador que haría que el cuerpo así:

<body> 
    <table> 
    <tr><td> 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    </td></tr> 
    </table> 
</body>

vez display: table no funciona bien con Internet Explorer 7 y principios (se ve como debería funcionar en IE8, pero todavía no podía hacerlo)

Fuente

2010-12-22 17:09:55

¿Coloca un div en el centro pero con altura dinámica?

Respuesta

Cuestiones relacionadas