Тёмный

Las 2 mejores formas de CENTRAR un DIV con CSS 

midudev
Подписаться 315 тыс.
Просмотров 211 тыс.
50% 1

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

Наука

Опубликовано:

 

11 дек 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 140   
@trollerox7276
@trollerox7276 Год назад
El wey de Backend: 🗿
@Johmaz23
@Johmaz23 14 дней назад
me ofende , pero lo tomare como anectoda
@noaxhellio6871
@noaxhellio6871 Год назад
Ya sé cómo centrar un div finalmente soy frontend
@midudev
@midudev Год назад
jajajaja por fin!
@amarrok8010
@amarrok8010 10 месяцев назад
Jajajaja listo ya puedes entrar a Google 😅 , pd : no sabia el de place item ... yo usaba los float o los padding y margin auto
@genexsus97
@genexsus97 Год назад
La primera forma si es correcta pero para muy pocos usos que tengas que darle a contenedores que necesitas que sean absolutos
@arturoaguilera5167
@arturoaguilera5167 Год назад
+1
@Titanblack007
@Titanblack007 Год назад
Pues funciona si, funciona, pero es horrible y consume mas recursos y espacio en memoria
@noealexanderortizaragon7236
@noealexanderortizaragon7236 11 месяцев назад
+1
@antonior.9661
@antonior.9661 6 месяцев назад
@@Titanblack007 tu si que consumes espacio, pero inútilmente y lo lamentable es que ningún conocido te lo haya dicho.
@jonathan8406
@jonathan8406 Год назад
Ahora se centrar un div!! Gracias Midu
@midudev
@midudev Год назад
Un placer!!!
@GonzaloGuevaraFreire
@GonzaloGuevaraFreire Год назад
Con grid y flex una pasada, recuerda aquellos tiempos donde había que hacer magia con absolute y márgenes negativos
@luquita6004
@luquita6004 Год назад
esta información vale millones
@midudev
@midudev Год назад
👍 gracias!!
@rayvaqu
@rayvaqu Год назад
¡Excelente! Ahora sólo me falta saber qué es un div
@jorgeadriano2225
@jorgeadriano2225 Год назад
Un Div es una etiqueta que usamos para dividir contenido
@andrustn
@andrustn Год назад
Es un elemento html que se usa para contener otros elementos html
@davidcolmenarez5003
@davidcolmenarez5003 Год назад
Buenísimo!! Tienes tutorial para hacer "nav" de manera práctica y sencilla como todos tus tutoriales??
@LorenzoJimenez
@LorenzoJimenez 9 месяцев назад
Me volaste la mente! Gracias.
@medalinasalazaralbornoz1795
buenísimo!
@JulianRiverplate14
@JulianRiverplate14 Год назад
Está información vale millones!!
@hakistorm
@hakistorm Год назад
Un like por más de estos shorts maravillosos. ✨
@freedevabc
@freedevabc Год назад
La primera si es correcta, Midu. Recuerdo hace poco que tenía que usar relative y absolute y esa me salvó xd.
@tintacs1901
@tintacs1901 8 месяцев назад
gracias compa
@VG.Prints
@VG.Prints Год назад
el buen timming, me estaba peleando precisamente con esto y me lo solucionaste jajaj
@sinoriginalidadoficial
@sinoriginalidadoficial 11 месяцев назад
el algoritmo te salvo
@emmanueldavid4944
@emmanueldavid4944 Год назад
Los de css2: monos de 2001 space odissey
@gustavovargas370
@gustavovargas370 Год назад
ahora por fin podré pasar de backend a frontend
@MateoMor
@MateoMor 11 месяцев назад
La primera forma es útil cuando quieres centrar un div sobre el borde de su padre para hacer bonitas decoraciones
@nicolasalfaro6111
@nicolasalfaro6111 5 месяцев назад
Esto vale oro🗿
@mejayoficial
@mejayoficial Год назад
El del grid no lo sabía la verdad
@N4RE.
@N4RE. 11 месяцев назад
RU-vid 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🤯🤯
@midudev
@midudev 11 месяцев назад
Te estamos vigilando
@N4RE.
@N4RE. 11 месяцев назад
@@midudev jajaja espero que lo sigáis haciendo
@MiguelAngel-yt7di
@MiguelAngel-yt7di Год назад
Exelentes videos bro..Supongo que es en VS code y si es así saben cuál es el plugin para visualizar el css?
@Mixxeru
@Mixxeru 6 месяцев назад
Yo quería centrar un nav pero me sirvió igual, grande
@TheLeondurmiente
@TheLeondurmiente Год назад
En cuanto cambie el short se me va a olvidar, pero gracias
@MateoMor
@MateoMor 11 месяцев назад
¡Que bien! Por fin se centrar un div :D *procede a olvidarcele por quincuagesimosegunda vez*
@aquirozca
@aquirozca Год назад
Midu, siempre estilo todo con flex justamente porque es muy fácil de alinear de cualquier forma. Es una buena práctica?
@YusufSalahAdDin
@YusufSalahAdDin Год назад
La última forma no me la sabia!
@midudev
@midudev Год назад
Esoooo! Ahora lo sabes!!! 🤗
@ManelTorres7
@ManelTorres7 Год назад
Siempre que empiezas un ejercicio aprendendiendo css... 😂
@angelsv
@angelsv Год назад
Contratado! 🤝
@filipayaviri1787
@filipayaviri1787 11 месяцев назад
Gracias
@loganAcc
@loganAcc Год назад
Ahora ya soy senior gracias...
@midudev
@midudev Год назад
Excelente! jajajaja
@guilledata
@guilledata Год назад
Cual es la forma correcta de centrar un div que tiene que ser position absolute dentro de un relative?
@ericgomez4780
@ericgomez4780 Год назад
Pero si utilizamos grid, hay muchas cosas copadas de flex que no se pueden usar no?
@midudev
@midudev Год назад
Y viceversa. Por suerte, lo puedes hacer con ambos.
@julianel_
@julianel_ 10 месяцев назад
Necesito un curso de grid y de flexbox
@victordiaz5679
@victordiaz5679 5 месяцев назад
Como tan muchacho, yo lo veo programando muy bien
@carlogustavovalenzuelazepe5774
cual es la forma mas complicada de centrarlo?
@ismaelmendez2441
@ismaelmendez2441 10 месяцев назад
he aprendido mas contigo que yendo a la universidad.
@martinperea2103
@martinperea2103 Год назад
Gracias!!!
@midudev
@midudev Год назад
Gracias por comentar!
@potatito1845
@potatito1845 Год назад
Gracias ya por fin me desligó del display flex jaajaja
@AlexLoLar
@AlexLoLar 6 месяцев назад
contenedor{ position: relative; width: cualquiera; height: cualquiera; } div{ positon: absolute; top: calc(50% - 20px); left: calc(50% - 40px); width: 20px; height: 10px; }
@antoniosalinas8178
@antoniosalinas8178 Год назад
que pagina web estas usando para este ejemplo?
@gabrielalexander2
@gabrielalexander2 Год назад
Que dices de colocarle display flex al padre y margin auto al hijo midu? igual son 2 lineas, crees que traiga desventajas?
@midudev
@midudev Год назад
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).
@vaas28
@vaas28 Год назад
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
@FrijolitoMaster
@FrijolitoMaster 11 месяцев назад
Que tiene que ver ES6 con CSS bro
@vaas28
@vaas28 11 месяцев назад
@@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.
@shimozurdo
@shimozurdo 11 месяцев назад
Pregunta, el div padre debería tener un altura explícita?
@sebastianestrada1311
@sebastianestrada1311 Год назад
Oye creo que hay otras ponerlo dentro de una etiqueta center, y la de poner en el padre poner atributo align center
@midudev
@midudev Год назад
No. No uses la etiqueta center de HTML. Está deprecada y no es semántica.
@sebastianestrada1311
@sebastianestrada1311 Год назад
@@midudev eso había escuchado, en algún tiempo los exploradores dejaran de usarla?
@vaas28
@vaas28 Год назад
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.
@sebastianestrada1311
@sebastianestrada1311 Год назад
@@vaas28 y la del atributo align?
@vaas28
@vaas28 Год назад
@@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.
@XtrullorEas
@XtrullorEas 11 месяцев назад
bootsrap tiene alguna propiedad que haga el ccs final?
@lucianoquiroga9434
@lucianoquiroga9434 Год назад
Grácias crackk
@AlvarooZ
@AlvarooZ Год назад
Cuántas líneas ahorradas magnífico
@midudev
@midudev Год назад
👍
@christianalban9
@christianalban9 Год назад
La traducción de place sería colocar no emplazar 😅, buen truco de todas formas❤
@midudev
@midudev Год назад
Pero Christian, que emplazar y colocar son sinónimos. 😅
@agustinflores614
@agustinflores614 Год назад
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
@gamecode8627
@gamecode8627 Год назад
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
@NicolasLuengas
@NicolasLuengas Год назад
​@@gamecode8627 si no estoy mal usando transform.translate al 50% lo centraría sin tener que hacer cálculos, no?
@gamecode8627
@gamecode8627 Год назад
@@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
@soydavidjoan345
@soydavidjoan345 Год назад
@NicolasLuengas
@NicolasLuengas Год назад
Obsoleto 💀💀💀💀
@imadev2897
@imadev2897 Год назад
Esaaa
@Phanto.
@Phanto. 10 месяцев назад
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.
@lolacoronel1253
@lolacoronel1253 Год назад
Bum le toca un proyecto legacy donde no puede usarlo jsjsjs
@LEYSTARINOVA
@LEYSTARINOVA 9 месяцев назад
y como lo centro inmedio pero en la izquiera?
@naimlopez793
@naimlopez793 11 месяцев назад
😎
@jormencar
@jormencar Год назад
Midu, the best
@midudev
@midudev Год назад
Gracias, Jorge!
@angelitri
@angelitri 11 месяцев назад
Por qué hay que darle estilo al parent y no al div?
@XtrullorEas
@XtrullorEas 11 месяцев назад
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.
@justinvalverdebarrantes3668
grid solo por las medidas fr pero meh muy muy poco lo uso
@gabrielmancilladucuara4816
@gabrielmancilladucuara4816 Год назад
crack
@edaxucles90
@edaxucles90 Год назад
¿Por que la primera forma no es correcta?
@jhordanfm2557
@jhordanfm2557 11 месяцев назад
yo le meto un display block y margin auto xd
@OscarF20
@OscarF20 Год назад
Y margin auto ya no es canon? 😢
@akihitohiraga1262
@akihitohiraga1262 Год назад
Me estas diciendo que margin: 0px auto ya no funciona?
@midudev
@midudev Год назад
margin: 0 auto, sólo centra en un eje.
@jodter1
@jodter1 Год назад
Como quisiera q alguien explicara porque hacer tanta cosa no solo escribir y ya
@JoseFernandez-wt2ud
@JoseFernandez-wt2ud Год назад
Por qué la primera forma no es correcta? 🤔
@martin_kztro
@martin_kztro Год назад
Porque son muchas líneas de código innecesarias
@emmywebgi639
@emmywebgi639 Год назад
La primera forma es comúnmente utilizada más para modales 👍
@midudev
@midudev Год назад
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).
@jose2127
@jose2127 Год назад
👌👌
@almusic5869
@almusic5869 Год назад
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*😂
@milicomatt3443
@milicomatt3443 5 месяцев назад
Yo creo que alguien te pidio eso jajaaj
@ferchitoqn92
@ferchitoqn92 Год назад
Me van a pegar por esto pero para eso esta elementor jejeje saludos
@midudev
@midudev Год назад
😅
@mentekilox7534
@mentekilox7534 11 месяцев назад
Gracias, ahora supongo que tendré que aprender programación, youtube me recomienda esto sabiendo que soy un puto albañin jaja
@pepernando2221
@pepernando2221 10 месяцев назад
Soy backed, lo lamentó no entendí el tutorial
@cesarfrin
@cesarfrin Год назад
y en posición absoluta?
@XtrullorEas
@XtrullorEas 11 месяцев назад
la primera opción
@user-pl7yo3qw1v
@user-pl7yo3qw1v 5 месяцев назад
Yo uso margin auto ._.
@manolobarranco4352
@manolobarranco4352 Год назад
Ahora sé centrar un div! Lo único que me falta es saber qué es un div... 🤔😅
@midudev
@midudev Год назад
div, es un elemento de HTML para DIVidir el contenido. No proporciona información semántica.
@manolobarranco4352
@manolobarranco4352 Год назад
@@midudev ok, gracias 👍
@fernandosandoval9590
@fernandosandoval9590 Год назад
@@midudev y para que centrarlo?(pregunta sería midu)
@pe3934
@pe3934 Год назад
@@fernandosandoval9590 Pues por estilo X'd, estética, para eso es CSS
@gamertops8252
@gamertops8252 11 месяцев назад
Usar center en el HTML 💀
@baldomero7458
@baldomero7458 Год назад
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?
@gamecode8627
@gamecode8627 Год назад
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
@aguss3163
@aguss3163 11 месяцев назад
O también con margin: auto;
@Owenbueno
@Owenbueno Год назад
Hay otra forma pero no estoy seguro de su eficiencia. margin: auto;
@frankilperez8001
@frankilperez8001 Год назад
margin: auto
@Angelnico5169
@Angelnico5169 Год назад
Que es un div?
@NicolasLuengas
@NicolasLuengas Год назад
Un divisor, por decirlo así, un "conjunto" dónde se agrupan los elementos
@MrAlbertator
@MrAlbertator 11 месяцев назад
margin: 0, auto;
@AlexanderCastilloIlovegod
@AlexanderCastilloIlovegod Месяц назад
es falso a mi no se me fue alineado el div hacia centro como diijiste en el segundo mandato.
@amaurifriasvargas600
@amaurifriasvargas600 Год назад
Yo uso marigo:0 auto
@midudev
@midudev Год назад
margin: 0 auto, sólo centra horizontalmente.
@amaurifriasvargas600
@amaurifriasvargas600 Год назад
@@midudev Si me alegro leer tu respuesta!
@henrygutierrez6182
@henrygutierrez6182 Год назад
margin: 0 auto; y a casa
@midudev
@midudev Год назад
A casa sin centrar el elemento verticalmente. 😅😂
@imanolvn5907
@imanolvn5907 Год назад
Margin: 0 auto;
@midudev
@midudev Год назад
Esa solo centra en el eje horizontal.
@justinvalverdebarrantes3668
prefiero mas flex
Далее
Аварийный выход
00:38
Просмотров 409 тыс.
Regular Season vs. PLAYOFFS part 2 #pavelbarber
00:14
Just try to use a cool gadget 😍
00:33
Просмотров 40 млн
This Is So Worth 87 Tries
00:15
Просмотров 5 млн
Cómo Centrar tus Elementos HTML Fácilmente
6:42
Просмотров 216 тыс.
L22 Aprendemos a colocar cajas. La propiedad CSS float
13:52
Aprende CSS en 15 Minutos 📘
20:43
Просмотров 655 тыс.
Guía sobre Display en CSS
6:09
Просмотров 127 тыс.
CSS Grid vs Flexbox - Cuando usar uno u otro.
22:09
Просмотров 339 тыс.
Девушка и AirPods Max 😳
0:59
Просмотров 16 тыс.
iPhone 15 Pro vs Samsung s24🤣 #shorts
0:10
Просмотров 13 млн
#miniphone
0:16
Просмотров 3 млн