Las 2 mejores formas de CENTRAR un DIV con CSS
Vložit
- čas přidán 6. 09. 2024
- Deja de decir que no sabes centrar un div o que es muy difícil en CSS. ¡Es facilísimo!
Con estas dos maneras lo vas a hacer perfectamente y sin usar hacks raros del pasado. ¡Ahora ya lo sabes!
#shorts
El wey de Backend:
🗿
me ofende , pero lo tomare como anectoda
tamdre si era
Ya sé cómo centrar un div finalmente soy frontend
jajajaja por fin!
Jajajaja listo ya puedes entrar a Google 😅 , pd : no sabia el de place item ... yo usaba los float o los padding y margin auto
La primera forma si es correcta pero para muy pocos usos que tengas que darle a contenedores que necesitas que sean absolutos
+1
Pues funciona si, funciona, pero es horrible y consume mas recursos y espacio en memoria
+1
@@Titanblack007 tu si que consumes espacio, pero inútilmente y lo lamentable es que ningún conocido te lo haya dicho.
Con grid y flex una pasada, recuerda aquellos tiempos donde había que hacer magia con absolute y márgenes negativos
Ahora se centrar un div!! Gracias Midu
Un placer!!!
Buenísimo!!
Tienes tutorial para hacer "nav" de manera práctica y sencilla como todos tus tutoriales??
esta información vale millones
👍 gracias!!
¡Excelente! Ahora sólo me falta saber qué es un div
Un Div es una etiqueta que usamos para dividir contenido
Es un elemento html que se usa para contener otros elementos html
buenísimo!
Me volaste la mente! Gracias.
Un like por más de estos shorts maravillosos. ✨
CZcams me hace explotar la cabeza a veces ajjajaja justo hoy tenía un problema con un div que no se quería centrar y me sale este vídeo🤯🤯
Te estamos vigilando
@@midudev jajaja espero que lo sigáis haciendo
La primera si es correcta, Midu. Recuerdo hace poco que tenía que usar relative y absolute y esa me salvó xd.
contenedor{
position: relative;
width: cualquiera;
height: cualquiera;
}
div{
positon: absolute;
top: calc(50% - 20px);
left: calc(50% - 40px);
width: 20px;
height: 10px;
}
Está información vale millones!!
el buen timming, me estaba peleando precisamente con esto y me lo solucionaste jajaj
el algoritmo te salvo
La primera forma es útil cuando quieres centrar un div sobre el borde de su padre para hacer bonitas decoraciones
Pero si utilizamos grid, hay muchas cosas copadas de flex que no se pueden usar no?
Y viceversa. Por suerte, lo puedes hacer con ambos.
gracias compa
Oye creo que hay otras ponerlo dentro de una etiqueta center, y la de poner en el padre poner atributo align center
No. No uses la etiqueta center de HTML. Está deprecada y no es semántica.
@@midudev eso había escuchado, en algún tiempo los exploradores dejaran de usarla?
Funciona al 100% 👌 al no ser usada por librerias al estar deprecated, se aplica bien. Pero no la uses en sitios web, ya hay otras alternativas como la del vídeo.
@@vaas28 y la del atributo align?
@@sebastianestrada1311 sigue funcionando, pero esta deprecated también 😅. Básicamente las "buenas prácticas" dicen que todo lo que tenga que ver con formato y alineación uses css y no los atributos/etiquetas de HTML para hacerlo. No es que no funcione, así jala el mundo actual. Como delegar responsabilidades, quién tiene que hacer que.
La última forma no me la sabia!
Esoooo! Ahora lo sabes!!! 🤗
Midu, siempre estilo todo con flex justamente porque es muy fácil de alinear de cualquier forma.
Es una buena práctica?
Exelentes videos bro..Supongo que es en VS code y si es así saben cuál es el plugin para visualizar el css?
El del grid no lo sabía la verdad
Después de la implementación de ES6, es fácil decir "forma correcta", antes era donde cada quien se la ingenieba diferentes formas para diferentes elementos. Igual buen video
Que tiene que ver ES6 con CSS bro
@@FrijolitoMaster las propiedades que aparecen en el vídeo del css, aparecieron con ese estándar, antes de eso no existían, y es donde se usaban las formas "incorrectas", pero es porque todo cambia.
Que dices de colocarle display flex al padre y margin auto al hijo midu? igual son 2 lineas, crees que traiga desventajas?
Que, aunque funciona, siempre es mejor que sea el contenedor el que sabe cómo debe de colocar a los hijos.
La solución del margin: auto, te obliga a estilar el hijo y no funciona correctamente si luego tienes más de un elemento (el otro sí que funcionaría correctamente).
¡Que bien! Por fin se centrar un div :D
*procede a olvidarcele por quincuagesimosegunda vez*
Esto vale oro🗿
bootsrap tiene alguna propiedad que haga el ccs final?
Obsoleto
💀💀💀💀
ahora por fin podré pasar de backend a frontend
Yo quería centrar un nav pero me sirvió igual, grande
En cuanto cambie el short se me va a olvidar, pero gracias
Necesito un curso de grid y de flexbox
Los de css2: monos de 2001 space odissey
Cual es la forma correcta de centrar un div que tiene que ser position absolute dentro de un relative?
Por qué no es correcto lo del position? Creo haberlo visto en algún vídeo de Gonzalo hacia un JR y darlo como aprobado
Yo no soy un profesional, pero te puedo decir que estar haciendo calculos para centrarlo es menos conveniente, usando flex o grid piensas menos y es más legible
@@gamecode8627 si no estoy mal usando transform.translate al 50% lo centraría sin tener que hacer cálculos, no?
@@NicolasLuengas No lo se, depende, si el transform con un porcentaje lo hace con respecto a el padre o a si mismo, eso lo podes probar ;), pero me parece una buena opción
Siempre que empiezas un ejercicio aprendendiendo css... 😂
Contratado! 🤝
cual es la forma mas complicada de centrarlo?
La traducción de place sería colocar no emplazar 😅, buen truco de todas formas❤
Pero Christian, que emplazar y colocar son sinónimos. 😅
Gracias
Como tan muchacho, yo lo veo programando muy bien
Gracias ya por fin me desligó del display flex jaajaja
Pregunta, el div padre debería tener un altura explícita?
Por qué hay que darle estilo al parent y no al div?
porque si le das al div centras todos los div y quizá no todos los div los quieres centrar, y parent es una clase dentro del div, así que todos los div que tengan el class parent se centraran solo esos.
y como lo centro inmedio pero en la izquiera?
Gracias!!!
Gracias por comentar!
he aprendido mas contigo que yendo a la universidad.
Cuántas líneas ahorradas magnífico
👍
Yo todo un intelectual: margin: 0 auto;
Ahora ya soy senior gracias...
Excelente! jajajaja
Junior: pim pum papas, hecho
Senior: está bien, pero hay una mejor manera de hacerlo ;)
Estudiante de prepa: No está centrado!!! Solo pondré el navegador en pequeño y listo, se ve centrado.
¿Por que la primera forma no es correcta?
Grácias crackk
que pagina web estas usando para este ejemplo?
Bum le toca un proyecto legacy donde no puede usarlo jsjsjs
Por qué la primera forma no es correcta? 🤔
Porque son muchas líneas de código innecesarias
La primera forma es comúnmente utilizada más para modales 👍
La primera no es correcta porque:
1. Es un hack
2. Lo estás posicionando a mano
3. Te complica mucho estilar posiciones a partir de ahí.
4. Es innecesariamente larga.
5. Tienes que estilar el hijo directamente (cuando lo mejor sería al revés).
Midu, the best
Gracias, Jorge!
Me estas diciendo que margin: 0px auto ya no funciona?
margin: 0 auto, sólo centra en un eje.
Como quisiera q alguien explicara porque hacer tanta cosa no solo escribir y ya
y en posición absoluta?
la primera opción
Y margin auto ya no es canon? 😢
Sería genial que solo pusieras Display: flex y centrar todo y ya, Pero no, antes tienes que definir el alto o ancho🥴, si no no se mueve el div ni cagand*😂
yo le meto un display block y margin auto xd
grid solo por las medidas fr pero meh muy muy poco lo uso
Esaaa
😎
Me van a pegar por esto pero para eso esta elementor jejeje saludos
😅
Gracias, ahora supongo que tendré que aprender programación, youtube me recomienda esto sabiendo que soy un puto albañin jaja
Soy backed, lo lamentó no entendí el tutorial
crack
Yo creo que alguien te pidio eso jajaaj
Ahora sé centrar un div!
Lo único que me falta es saber qué es un div... 🤔😅
div, es un elemento de HTML para DIVidir el contenido. No proporciona información semántica.
@@midudev ok, gracias 👍
@@midudev y para que centrarlo?(pregunta sería midu)
@@fernandosandoval9590 Pues por estilo X'd, estética, para eso es CSS
Yo uso margin auto ._.
Peeeero, si el hijo a centrar es en realidad un seudoelemento talvez la forma incorrecta podria ser correcta, asi centrarias el seudoelemento modificado casi nada el padre. Que opinas?
Usando margin puedes centrarlo horizontalmente.
margin-left: auto
margin-right: auto
Verticalmente hay otras opciones que podemos ver, tratando de evitar modificar position, pero no se te impide
margin: auto
Hay otra forma pero no estoy seguro de su eficiencia. margin: auto;
O también con margin: auto;
Usar center en el HTML 💀
margin: 0, auto;
👌👌
es falso a mi no se me fue alineado el div hacia centro como diijiste en el segundo mandato.
Margin: 0 auto;
Esa solo centra en el eje horizontal.
Que es un div?
Un divisor, por decirlo así, un "conjunto" dónde se agrupan los elementos
Yo uso marigo:0 auto
margin: 0 auto, sólo centra horizontalmente.
@@midudev Si me alegro leer tu respuesta!
margin: 0 auto; y a casa
A casa sin centrar el elemento verticalmente. 😅😂
prefiero mas flex