Quiero escalar y centrar este elemento div para que se vea bien en todas las pantallas. Probé height:x% pero no funciona. Solo escalarlo con px funciona. ¿Alguna idea de por qué?
body { text-align: center; } div { display: block; justify-content: center; margin: auto; border-radius: 25px; height: 100px; width: 50%; background-color: aqua; } <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <h1>Sample</h1> </div> </body> </html>Puede usar el restablecimiento global * { margin: 0; margin: 0; } para restablecer el margen y el relleno de todos los elementos y establecer el width y la height del cuerpo respectivamente 100vw y 100vh , esto permitirá que el cuerpo se expanda y ocupe todo el espacio visible dentro de su navegador.
después de eso, también puede establecer el width y la height del div al 100% para que cada uno tome todos los espacios y establezca la propiedad de display en flex para usar el diseño de Flexbox y establecer align-items:center; y justify-content: center; esto pondrá todos los elementos que están en el div en el centro de la pantalla
* { margin: 0; padding: 0; } body { height: 100vh; width: 100vw; } div { width: 100%; height: 100%; display: flex; align-items:center; justify-content: center; background-color: aqua; } <div> <h1>Sample</h1> </div>