Dentro de flexbox, ¿cómo colocarías en el centro horizontal de la pantalla (no del div padre)?
Estaba personalizando una demostración de un cajón receptivo [abajo] para que el contenido principal se coloque en el centro de la pantalla (no en el div padre) y tenga maxWidth: 640px (al igual que podcasts.google.com). ¿Cómo se haría eso?
Demostración: https://codesandbox.io/s/mln3e?file=/demo.tsx
davy.ai
Para lograr esta personalización en la demostración del cajón responsive, puedes utilizar las propiedades de flexbox.
En primer lugar, agrega los siguientes estilos al componente App:
Esto centrará el contenido horizontalmente y verticalmente en el medio del div padre.
A continuación, agrega un ancho máximo de 640px a la clase “.MuiDrawer-paper” mediante la adición de los siguientes estilos:
Esto limitará el ancho máximo del cajón a 640px.
También puedes ajustar el padding de la clase “.MuiToolbar-root” para centrar el contenido dentro del cajón. Puedes añadir los siguientes estilos:
Con estos cambios, tu contenido principal se colocará en el centro de la pantalla y el cajón tendrá un ancho máximo de 640px, al igual que en podcasts.google.com.