Aprende a centrar elementos en CSS

[@brandotcom6942]

Tengo diplomado postgrado maestria y un doctorado pero seguire buscando como centrar un div y no me da verguenza decirlo

[@MitosdeArkovia]

Por los epiiñtilis.santos.

[@josecarlosapalamamani3271]

Es que centrar un div es una ceremonia, un ritual en el preguntas muchas veces a chatgpt para que en 10 repuestas erróneas te de una correcta

[@the_one_123one]

🧐

[@elauquenex]

Backend dev: esta información vale millones

[@miguecast]

Nah nah no flipes 😂

[@Charles8-18]

Recién aprendí a usar los Flex, jaja, no puedo creer lo fácil que es centrar todo el contenido, aunque se tienen que usar muchas cajas.

[@rip.vanwinkle]

En tailwind me aprendí esas clases JAJAJAJA "flex flex-col items-center justify-center"

[@richigarciacastro]

Midu, te vi en la platzi conf. Vaya orador, fue una presentación muy buena. Me faltó encontrarte para la foto.

[@midudev]

Muchas gracias, Miguel 🤗

[@gabitzzo]

con display flex podés usar las propiedades justify-content: center; y align-items: center;

[@netopmtz]

Un detalle: no es necesario colocar flex-direction: column; si sólo es un elemento el que se quiere centrar.

[@Quo777]

Pero es buena práctica ya que se deja preparado en caso de añadir más contenido después.

[@Darknhyt01]

El asunto es que si se lo deja x defecto (row) el div suele deformarse según el contenido que tenga la pagina y el propio div, colocando el eje sobre la columna se soluciona muchas cosas y es mas cómodo de organizarlo con otros elementos.

[@BrokenDevEspanol]

Me da gusto saber que la solución que siempre más me gustó a mí es la más correcto, me encanta usar flex-box

[@V1N1V]

Para centrar horizontalmente display: block; margin: auto;

[@miguecast]

Yeah! 🤘😎

[@pfgaming4675]

Andaba buscando formas distintas de centrar un div con imágen y texto por arriba, está forma de centrar me funcionó perfecto! 🎉

[@pongamoslo-a-prueba]

Me explotó la cabeza 🤯 div center

[@Macross2111]

no sé que acabo de ver ni que es un div, pero ahora si se como hacer eso.. gracias..

[@Miguedevfx]

Que genial, necesito más tips de CSS así como este, danos más tips midu.

[@GRANdisimooo]

si es no usar ni flex, ni grid se puede hacer esto .main{position: relative; width: 400px; height: 400px;}, si el texto tiene un widht de 50px y un height de 20px, se puede hacer lo siguiente: .text{position: absolute; top: calc(50% - 10px); left: calc(50% - 25px); }, con esto se logra un centrado perfeto ya que se resta la mitad del elemento quedando exactamente en la mitad de este tanto para izquierda y derecha, como para arriba y abajo.

[@tractor1114]

Esto vale Oro Midu!!!

[@leonardomorganti654]

Midu me encantaría un curso de css desde cero a experto!

[@terminstor-lu1ly]

Grande loco al fin uno que explica lo que nesesito

[@betoemihtevas]

Hazte un video de las mejores extensiones please

[@emiliozaldivar2465]

amigo te sigo y eres muy instructivo con tus videos, un consejo, en la metodología educativa no se muestran las como hacer las cosas mal, solo se muestra como hacerla bien, una critica constructiva.

[@jorgeantoniotorres]

Muchas gracias. Use el código para centrar una section y solo borre la flex-direction para que me quedara como quería.

[@josealejandromontero2145]

Esta información vale millones

[@jimaltair1854]

Sos un genio. Gracias.

[@unalexmas]

Si aprendiste a maquetar y alinear sin dolores de cabeza, aprendiste todo de CSS, el resto es bienvenido con facilidad.

[@lautaroburgos9188]

Excelente contenido Midu

[@Metro054]

Me sorprende que algo tan básico se me siga olvidando

[@josecarlosapalamamani3271]

Como debe ser, centrar un div, es toda una ceremonia 😂😂

[@rafaelsolano2339]

Pensé que midudev estaba loco hasta que vi el final.

[@juampicortez4515]

CON EL ULTIMO ME SALVASTE AAAAA

[@MirlonyGG]

Yo estaba tratando centrar el texto dentro del bloque, me sirvio la ultima, thx

[@gusget]

Los de backend: esto puede valer millones!!

[@SonGoku-pc7jl]

muchas gracias midu, el video es super bueno, pero al ir tan rápido no solo no se puede pausar o tirar atrás sinó que molaria que ahondases más en entender cada cosilla como vh, o el transform que escuche que no se recomienda o si hay más de un elemento o si la pantalla es pequeña... ahora que te dedicas a crear contenido me sabe menos mal pedirte un video como este jeje, y enfocarlo un poco a mobile first complicandolo con un flex que incluya 3 imagenes por ejemplo que con 360px de mobiles pequeños se desajustan al centrarse y los viewports del main aprender a jugarlos mejor por zonas o las imágenes y sus max o min widths o clams o objects fits, que si imgs backgrounds o no, a aprender a enfocarlo todo mejor en mobile first design porque no encuentro sitio que se explique todo con claridad, y menos en español por lo que podria ser un buen beneficio para la habla hispana si haces el gran y definitivo video de mobile first jeje. y si no lo haces... siempre seré fan tuyo igual jaja ;)

[@ulyssescortes4835]

Porque tendríamos que usar column o row si va a ir centrado de todas formas?

[@rubencid2575]

Con justify-itema center puedes y no necesitas la dirección

[@hugocangi6214]

te comento que termine el icono de instagram ,voy a ver este buen domingo

[@LorenzoJimenez]

Ahora un div que cubra toda la pantalla.

[@miguecast]

Usa Tailwind: "flex flex-col justify-center align-center"

[@luism4axeso745]

Asco

[@AdriaFabrega]

Porque grid presenta mas problemas que flexbox?

[@ermirosasantiago3322]

Me funcionó gracias

[@josuegranados6953]

Excelente video! Creo que para centrar un solo div no necesitamos flex-direction: column; 🤔 El default (row) tambíen funciona, o será que no estoy teniendo en cuenta algo?

[@carlosgomez7002]

Genial. Gracias

[@maximo_vj]

Todavía recuerdo cuando decían que no usarán FlexBox porque no iba durar 😂

[@diegoprietto]

Muy bueno!

[@InacoraCampos]

Hoy voy a aprender a centrar un div y mañana se me va a olvidar

[@adanvillanueva4299]

¿Que extensión usas para ver por un lado el diseño de la página?

[@MRLION-fb4qx]

Hola midu admiro mucho tus videos son increíbles 🤯😮 y consejos Pero podrías hacer una app como Twitch por favor plis Bro :)

[@facugon]

nadie puede centra un div! nos estas dando magia negra!

[@carlosv.7495]

Más simple. margin-left: auto; margin-right: auto;

[@misael3643]

Gracias

[@Mike-jq7os]

Solo agregar el tema de la compatibilidad con los navegadores

[@DDanielJ]

No entiendo una mrd de programación y espero que cuando empieze a estudiarla como carrera profecional pueda entender este video

[@laurao3807]

me flipa cómo está programando sin mirar a la pantalla si quiera, mirando a la cámara xd

[@ProspectaMx]

Podrías decirme que carrera fue la que estudiaste?

[@Thr4sh3rDev]

que dios te bendiga con muchos hijos midu

[@alexandern9667]

Chat gpt centrarme este div. Listo en 3 segundos

[@LoreDal]

Sería más fácil al main: display: flex; justify-content: center; align-items: center

[@sebastianestrada1311]

Depende de tu situación

[@demianm1845]

​@@sebastianestrada1311claro, hay un montón de formas de centrarlo, pero cada una es para cada contexto

[@sebastianestrada1311]

@@demianm1845 en realidad uso flexbox para todo es la mas fiable y estable jaja

[@XxXJUANXxX01]

que plugin usas para que se previsualice abajo? o es otro recorte del navegador??

[@fdorantesm]

Faltó display table. XD

[@TuTioJhon]

Que editor de codigo usas, y porfa el tema, indicamelo nuevo sub uwu

[@carlosrj9346]

yo utilizaría la etiqueta "center" xD

[@jesusobregon7699]

Finalmente lo conseguí

[@Samuel-rw5fz]

Quiero aprender bien a programar, algún curso gratis o no tan caro

[@totimang]

*a los backend les gusta esto

[@GD_Terra]

Posicion absoluta = troll

[@Gianles_]

Aqui lo que somos de la vieja escuela que solo usamos

[@gianpierree]

5 años de la universidad para recién aprender esto.

[@hcksssookj]

En la universidad no enseñan front

[@glennluque]

Osea que float: left, ya es historia

[@antoniomolis8]

MUCHAS GRACIAS MIDUUUU!!! ¿Alguien sabe por qué es necesario el flex-direction: column? ¿Qué problema tiene dejarlo en row? Gracias de antemano!!

[@kerneldiego]

Ninguno si esta solo, pero supongo que si tenés mas elementos hermanos lo usa para que estos se alineen verticalmente

[@kerneldiego]

También recorda que poses usar flex-wrap para que sea automático segun el ancho

[@Miqueliu]

No es necesario, esa declaración CSS sobra por completo. Seguramente Midu ha copiado y pegado la solución de otra fuente y no se ha molestado ni en chequearlo.

[@Reyes19211]

La solución flexelente!

[@raulabuin]

😂

[@gadhager]

Uso flex para todo yo 😂

[@the5tops618]

curso de css si son tan amables

[@suicum1990]

El display flex está bien, pero no es crossbrowsing en todos los navegadores. Ahí te dejo un nuevo método. Al contenedor display table, al elemento, display table-cell, vertical-aling center. Esto es completamente crosbrowsing y funciona en el 100% de los navegadores. El único inconveniente es que el width del table cell siempre será del 100% que el del padre, pero esto puede corregirse con otro div interior que le pongas el tamaño que quieras.

[@gambitogame8948]

Soy back end... El CSS me asusta XD

[@alegorian5691]

Yo todo un super dotado: div{margin: 0 auto}

[@santiagovelandiacasas1480]

Flutter: Hermano a mí méteme en un Center y te centro lo que sea donde sea piola 👌 CSS: A mí tienes que usarme con al menos 4 estilos diferentes, y sólo te centro ciertas cosas 😭

[@eddhacecosas]

me podrías decir que programa estas utilizando en este caso? o si estas usando visual que extensión usas para que te muestre como esta quedando la pagina en tiempo real

[@midudev]

codi.link

[@kall9296]

Cómo haces para que se vea como estás modificando?

[@d.c.oculos9284]

ahora nadie puede saber que no sabia centrar un div

[@novacode999]

como hace para que le salga la vist previa debajo? es alguna extensión?

[@hbiblia]

Pero la de absolute; no es mejor top,left,right,bottom = 0 ?

[@scramjsd]

jajaja ponele la antigua etiqueta por fuera del Div xD 🤣🤣🤣🤣

[@jhondowell3055]

Obsoleto. Va a dejar de funcionar pronto.

[@victor45436]

Algun tuto de css?

[@electronoscar7277]

.flex-container div { background-color:blue; margin: 5px; min-height: 15vh; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; flex-basis: 100%px; } .flex-container div { background-color:blue; margin: 0 auto; min-height: 15vh; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; flex-basis: 100%px; } La primera solución respeta los espacio entre div y div La segunda solucion centra los elementos respecto al padre Pero cuando la pantalla es más pequeña el fondo del texto y el texto mismo se apiñan y no dejan espacio ¿alguna solución?

[@cristhianortellado8906]

Te adoro

[@LukPolanco]

pense encontrar la solucion pero la misma configuracion que estoy usando y para emperorar nada cambio 😭😭

[@imadev2020]

Y que problema podría llegar a tener display: grid; place-items: center; ⁉️

[@titojesus615]

Lo mismo me pregunté

[@julietaruiz5442]

Centra videos ubicado en medio de otros contenedores tambien?? 🥹

[@Diiego37]

Sería más fácil text-align: center

[@sebastiancarballo9318]

Midu como puedo ver el css cómo vos lo estás mostrando en pantalla, lo veo super

[@estllc427]

Por eso mejor usar bootstrap y te soluciona la vida

[@kanonkn]

Muy bien pero un poco de ejercicio no te hará daño.

[@erickhilario8782]

En el último es innecesario el flex-direction 😅

[@ireisti1515]

Alguien me explica lo de min-height: 100vh?😢😢

[@kevincabana2180]

ufff "alfin tengo el hack"

[@jonathanchavez4719]

Yo le ponia margin: auto y listo o solo modificaba los margenes jajaha

[@Cristian-gi4bs]

align="center" se puede en el div?

[@midudev]

No

[@lucianofittipaldi6443]

Si no se pone el min-height 100 vh no funciona align ítems

[@paomos1139]

Y cómo centrar el texto?

[@juanmabritez267]

alguien sabe como centrar un div si le aplique la propiedad fixed? es que estoy haciendo una barra superior de navegacion

[@juansanchez2868]

alguen sabe por que no me puede funcionar el justify-content: center?, align-item si funciona pero el otro no

[@rodrigochavarry8942]

0:10

[@Martino17x]

0:01