Aprende a centrar elementos en CSS
HTML-код
- Опубликовано: 16 окт 2024
- Centrar un div, durante mucho tiempo, ha sido un trabajo muy complicado en CSS. ¡Pero estamos en 2022! Y existen diferentes formas para conseguirlo.
Usando flex, grid o absolute, dependiendo de lo que quieras lograr, lo puedes hacer.
En este vídeo de #shorts te enseño cómo lo puedes conseguir.
![Who Wrote a Short Story That Seriously Disturbed a Teacher? | Dirty Laundry x Smosh [Full Episode]](http://i.ytimg.com/vi/bvHAy_rKoEI/mqdefault.jpg)
Tengo diplomado postgrado maestria y un doctorado pero seguire buscando como centrar un div y no me da verguenza decirlo
Por los epiiñtilis.santos.
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
Backend dev: esta información vale millones
Nah nah no flipes 😂
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.
En tailwind me aprendí esas clases JAJAJAJA "flex flex-col items-center justify-center"
Midu, te vi en la platzi conf. Vaya orador, fue una presentación muy buena. Me faltó encontrarte para la foto.
Muchas gracias, Miguel 🤗
Un detalle: no es necesario colocar flex-direction: column; si sólo es un elemento el que se quiere centrar.
Pero es buena práctica ya que se deja preparado en caso de añadir más contenido después.
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.
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
con display flex podés usar las propiedades justify-content: center; y align-items: center;
no sé que acabo de ver ni que es un div, pero ahora si se como hacer eso.. gracias..
Andaba buscando formas distintas de centrar un div con imágen y texto por arriba, está forma de centrar me funcionó perfecto! 🎉
Midu me encantaría un curso de css desde cero a experto!
Que genial, necesito más tips de CSS así como este, danos más tips midu.
Me explotó la cabeza 🤯 div center
Esto vale Oro Midu!!!
Grande loco al fin uno que explica lo que nesesito
Esta información vale millones
Para centrar horizontalmente
display: block; margin: auto;
Yeah! 🤘😎
te comento que termine el icono de instagram ,voy a ver este
buen domingo
CON EL ULTIMO ME SALVASTE AAAAA
Sos un genio. Gracias.
Excelente contenido Midu
Pensé que midudev estaba loco hasta que vi el final.
Hazte un video de las mejores extensiones please
Los de backend: esto puede valer millones!!
Muchas gracias. Use el código para centrar una section y solo borre la flex-direction para que me quedara como quería.
Yo estaba tratando centrar el texto dentro del bloque, me sirvio la ultima, thx
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.
Porque grid presenta mas problemas que flexbox?
Me sorprende que algo tan básico se me siga olvidando
Porque tendríamos que usar column o row si va a ir centrado de todas formas?
Me funcionó gracias
Genial. Gracias
Muy bueno!
Finalmente lo conseguí
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?
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.
Hola midu admiro mucho tus videos son increíbles 🤯😮 y consejos
Pero podrías hacer una app como Twitch por favor plis Bro :)
Gracias
Si aprendiste a maquetar y alinear sin dolores de cabeza, aprendiste todo de CSS, el resto es bienvenido con facilidad.
Sería más fácil al main: display: flex; justify-content: center; align-items: center
Depende de tu situación
@@sebastianestrada1311claro, hay un montón de formas de centrarlo, pero cada una es para cada contexto
@@demianm1845 en realidad uso flexbox para todo es la mas fiable y estable jaja
Ahora un div que cubra toda la pantalla.
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 ;)
Podrías decirme que carrera fue la que estudiaste?
¿Que extensión usas para ver por un lado el diseño de la página?
que dios te bendiga con muchos hijos midu
Que editor de codigo usas, y porfa el tema, indicamelo nuevo sub uwu
Te adoro
Todavía recuerdo cuando decían que no usarán FlexBox porque no iba durar 😂
que plugin usas para que se previsualice abajo? o es otro recorte del navegador??
Posicion absoluta = troll
Faltó display table. XD
Con justify-itema center puedes y no necesitas la dirección
La solución flexelente!
😂
Cómo haces para que se vea como estás modificando?
Usa Tailwind: "flex flex-col justify-center align-center"
Asco
como hace para que le salga la vist previa debajo? es alguna extensión?
MUCHAS GRACIAS MIDUUUU!!!
¿Alguien sabe por qué es necesario el flex-direction: column? ¿Qué problema tiene dejarlo en row? Gracias de antemano!!
Ninguno si esta solo, pero supongo que si tenés mas elementos hermanos lo usa para que estos se alineen verticalmente
También recorda que poses usar flex-wrap para que sea automático segun el ancho
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.
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
codi.link
Midu como puedo ver el css cómo vos lo estás mostrando en pantalla, lo veo super
Pero la de absolute; no es mejor top,left,right,bottom = 0 ?
yo utilizaría la etiqueta "center" xD
me flipa cómo está programando sin mirar a la pantalla si quiera, mirando a la cámara xd
jajaja ponele la antigua etiqueta por fuera del Div xD 🤣🤣🤣🤣
Obsoleto. Va a dejar de funcionar pronto.
Algun tuto de css?
5 años de la universidad para recién aprender esto.
En la universidad no enseñan front
Solo agregar el tema de la compatibilidad con los navegadores
*a los backend les gusta esto
.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?
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 😭
Y que problema podría llegar a tener display: grid; place-items: center; ⁉️
Lo mismo me pregunté
Uso flex para todo yo 😂
pense encontrar la solucion pero la misma configuracion que estoy usando y para emperorar nada cambio 😭😭
curso de css si son tan amables
Osea que float: left, ya es historia
Chat gpt centrarme este div. Listo en 3 segundos
Nice!
Más simple. margin-left: auto; margin-right: auto;
No entiendo una mrd de programación y espero que cuando empieze a estudiarla como carrera profecional pueda entender este video
😂 wow no lo sabia
Soy back end... El CSS me asusta XD
Y cómo centrar el texto?
Si quiero empezar a programar en c .....cómo empiezo n?
ufff "alfin tengo el hack"
align="center" se puede en el div?
No
alguen sabe por que no me puede funcionar el justify-content: center?, align-item si funciona pero el otro no
Yo todo un super dotado: div{margin: 0 auto}
Si no se pone el min-height 100 vh no funciona align ítems
Sería más fácil text-align: center
alguien sabe como centrar un div si le aplique la propiedad fixed? es que estoy haciendo una barra superior de navegacion
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.
ahora nadie puede saber que no sabia centrar un div
Por eso mejor usar bootstrap y te soluciona la vida
Yo le ponia margin: auto y listo o solo modificaba los margenes jajaha
Aqui lo que somos de la vieja escuela que solo usamos
oie tengo senda duda! por que eres puro react ? si vue es mas facil que react. Deberias echarle un ojo y hacer videos tambien con vue, tendras aun mas vistas, piensalo.
a
Muy bien pero un poco de ejercicio no te hará daño.
Uso boostrap y a tomar viento
Alguien me explica lo de min-height: 100vh?😢😢
En el último es innecesario el flex-direction 😅
No fuistes a la clase de HTML5
😊