Las 2 mejores formas de CENTRAR un DIV con CSS
Вставка
- Опубліковано 11 гру 2022
- 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.
Ahora se centrar un div!! Gracias Midu
Un placer!!!
¡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
Con grid y flex una pasada, recuerda aquellos tiempos donde había que hacer magia con absolute y márgenes negativos
esta información vale millones
👍 gracias!!
Buenísimo!!
Tienes tutorial para hacer "nav" de manera práctica y sencilla como todos tus tutoriales??
buenísimo!
Un like por más de estos shorts maravillosos. ✨
Me volaste la mente! Gracias.
El del grid no lo sabía la verdad
Está información vale millones!!
La primera forma es útil cuando quieres centrar un div sobre el borde de su padre para hacer bonitas decoraciones
Los de css2: monos de 2001 space odissey
La primera si es correcta, Midu. Recuerdo hace poco que tenía que usar relative y absolute y esa me salvó xd.
ahora por fin podré pasar de backend a frontend
¡Que bien! Por fin se centrar un div :D
*procede a olvidarcele por quincuagesimosegunda vez*
Esto vale oro🗿
contenedor{
position: relative;
width: cualquiera;
height: cualquiera;
}
div{
positon: absolute;
top: calc(50% - 20px);
left: calc(50% - 40px);
width: 20px;
height: 10px;
}
UA-cam 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
Como tan muchacho, yo lo veo programando muy bien
Yo quería centrar un nav pero me sirvió igual, grande
gracias compa
Siempre que empiezas un ejercicio aprendendiendo css... 😂
En cuanto cambie el short se me va a olvidar, pero gracias
el buen timming, me estaba peleando precisamente con esto y me lo solucionaste jajaj
el algoritmo te salvo
La última forma no me la sabia!
Esoooo! Ahora lo sabes!!! 🤗
he aprendido mas contigo que yendo a la universidad.
Ahora ya soy senior gracias...
Excelente! jajajaja
Contratado! 🤝
Gracias ya por fin me desligó del display flex jaajaja
Gracias!!!
Gracias por comentar!
Gracias
Necesito un curso de grid y de flexbox
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.
Exelentes videos bro..Supongo que es en VS code y si es así saben cuál es el plugin para visualizar el css?
Obsoleto
💀💀💀💀
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.
Grácias crackk
Cual es la forma correcta de centrar un div que tiene que ser position absolute dentro de un relative?
Cuántas líneas ahorradas magnífico
👍
cual es la forma mas complicada de centrarlo?
Bum le toca un proyecto legacy donde no puede usarlo jsjsjs
Midu, siempre estilo todo con flex justamente porque es muy fácil de alinear de cualquier forma.
Es una buena práctica?
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.
La traducción de place sería colocar no emplazar 😅, buen truco de todas formas❤
Pero Christian, que emplazar y colocar son sinónimos. 😅
Pregunta, el div padre debería tener un altura explícita?
bootsrap tiene alguna propiedad que haga el ccs final?
Midu, the best
Gracias, Jorge!
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.
yo le meto un display block y margin auto xd
grid solo por las medidas fr pero meh muy muy poco lo uso
que pagina web estas usando para este ejemplo?
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).
crack
¿Por que la primera forma no es correcta?
Esaaa
Como quisiera q alguien explicara porque hacer tanta cosa no solo escribir y ya
y como lo centro inmedio pero en la izquiera?
Gracias, ahora supongo que tendré que aprender programación, youtube me recomienda esto sabiendo que soy un puto albañin jaja
Y margin auto ya no es canon? 😢
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
Me van a pegar por esto pero para eso esta elementor jejeje saludos
😅
Yo creo que alguien te pidio eso jajaaj
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*😂
Soy backed, lo lamentó no entendí el tutorial
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).
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
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.
Usar center en el HTML 💀
Me estas diciendo que margin: 0px auto ya no funciona?
margin: 0 auto, sólo centra en un eje.
Yo uso margin auto ._.
😎
👌👌
y en posición absoluta?
la primera opción
Hay otra forma pero no estoy seguro de su eficiencia. margin: auto;
O también con margin: auto;
margin: auto
margin: 0, 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: 0 auto; y a casa
A casa sin centrar el elemento verticalmente. 😅😂
Margin: 0 auto;
Esa solo centra en el eje horizontal.
Yo uso marigo:0 auto
margin: 0 auto, sólo centra horizontalmente.
@@midudev Si me alegro leer tu respuesta!
Que es un div?
Un divisor, por decirlo así, un "conjunto" dónde se agrupan los elementos
es falso a mi no se me fue alineado el div hacia centro como diijiste en el segundo mandato.
prefiero mas flex