imagina que tienes un contenedor de cierta altura.
Problema: si centra el contenido verticalmente dentro de ese contenedor, pero el contenido es mucho más grande que el contenedor, el contenido se desbordará por encima del contenedor.
Lo que quiero:
Quiero centrar el contenido verticalmente en cualquier caso, si es grande o pequeño, ya que no sé cuánto contenido habrá sin que fluya fuera del contenedor.
mira aquí:
.wrapper{ max-width: 300px; overflow-y: scroll; height: 100%; position: fixed; top: 0; right:0; bottom:0; left: 0; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <div class="bg-primary wrapper d-flex align-items-center"> <div class="content"> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 6 <br> 7 <br> 8 <br> 9 <br> 10 <br> 11 <br> 12 <br> 13 <br> 14 <br> 15 <br> 16 <br> 17 <br> 18 <br> 19 <br> 20 <br> 21 <br> 22 <br> 23 <br> 24 <br> 25 <br> 26 <br> 27 <br> 28 <br> 29 <br> 30 <br> 31 <br> 32 <br> 33 <br> 34 <br> 35 <br> 36 <br> 37 <br> 38 <br> 39 <br> 40 <br> 41 <br> 42 <br> 43 <br> 44 <br> 45 <br> 46 <br> 47 <br> 48 <br> 49 <br> 50 <br> 51 <br> 52 <br> 53 <br> 54 <br> 55 <br> </div> </div>El problema XY por cierto es que quiero tener un modal que aparezca en el medio de la pantalla, sea máximo 100vh y desplazable si es más grande.