{"id":14,"date":"2023-02-04T11:04:30","date_gmt":"2023-02-04T14:04:30","guid":{"rendered":"https:\/\/alejandro.uy\/blog\/?p=14"},"modified":"2024-02-13T20:51:59","modified_gmt":"2024-02-13T23:51:59","slug":"como-centrar-un-div-usando-css-grid","status":"publish","type":"post","link":"https:\/\/alejandro.uy\/blog\/2023\/02\/04\/como-centrar-un-div-usando-css-grid\/","title":{"rendered":"C\u00f3mo centrar un Div usando CSS Grid"},"content":{"rendered":"\n

En este art\u00edculo, veremos cuatro formas de centrar horizontal y verticalmente un div usando CSS Grid. Por supuesto, estas t\u00e9cnicas de centrado se pueden utilizar en cualquier tipo de elemento. <\/strong><\/p>\n\n\n

Configuraci\u00f3n inicial<\/h2>\n

Primero, creemos un contenedor con un elemento de caja simple dentro que usaremos para demostrar estos m\u00e9todos de centrado. Aqu\u00ed est\u00e1 el HTML:<\/p>\n

<\/b><\/p>\n\n\n

<article>\n  <div><\/div>\n<\/article><\/code><\/pre><\/div>\n\n\n\n
Y aqu\u00ed est\u00e1 el CSS inicial:<\/p>\n\n\n\n
article {\n  width: 100%;\n  min-height: 100vh;\n  background: black;\n  display: grid;\n}\n\ndiv {\n  width: 200px;\n  background: yellow;\n  height: 100px;\n}<\/code><\/pre><\/div>\n\n\n\n
En todos los ejemplos, usaremos la propiedad display: grid<\/span>. Esto establece el elemento article<\/span> como un contenedor de cuadr\u00edcula y genera una cuadr\u00edcula a nivel de bloque para ese contenedor.<\/p>\n\n\n\n
Ahora, veamos las diversas formas de centrar nuestro div.<\/p>\n\n\n\n
1. Centrar un Div con CSS Grid y place-self<\/h2>\n\n\n\n
Centrar el div es tan simple como esto:<\/p>\n\n\n\n
article {\n  width: 100%;\n  min-height: 100vh;\n  background: black;\n  display: grid;\n}\n\ndiv {\n  width: 200px;\n  background: yellow;\n  height: 100px;\n  place-self: center; \/* nuevo *\/\n}<\/code><\/pre><\/div>\n\n\n\n
La propiedad place-self<\/span> es una forma abreviada de las propiedades align-self<\/span> (vertical) y allow-self<\/span> (horizontal) (que son \u00fatiles si solo se centra en un eje).<\/p>\n\n\n\n
Usar place-self<\/span> es tan simple que es una soluci\u00f3n obvia. Pero no es la \u00fanica forma de centrar un elemento con Grid, as\u00ed que ahora veamos otros m\u00e9todos.<\/p>\n\n\n\n
Una ventaja de usar place-self<\/span> es que se aplica al elemento que se est\u00e1 centrando, lo que significa que tambi\u00e9n puede usarlo para centrar otros elementos en el mismo contenedor.

<\/p>\n\n\n
2. Centrar un div con CSS Grid, justify-content y align-items<\/h2>\n
La propiedad justify-content<\/span> se usa para alinear los elementos del contenedor horizontalmente cuando los elementos no usan todo el espacio disponible. Hay muchas formas de configurar la propiedad justify-content<\/span><\/p>\n
Al igual que la propiedad justify-content<\/span>, la propiedad align-items<\/span> se usa para alinear el contenido en un contenedor, pero alinea el contenido verticalmente en lugar de horizontalmente.<\/p>\n
En el c\u00f3digo prueba agreguemos el siguiente c\u00f3digo al contenedor principal:<\/p>\n\n\n
article {\n  width: 100%;\n  min-height: 100vh;\n  background: black;\n  display: grid;\n  justify-content: center; \/* nuevo *\/\n  align-items: center; \/* nuevo *\/\n}\n\ndiv {\n  width: 200px;\n  background: yellow;\n  height: 100px;\n}\n<\/code><\/pre><\/div>\n\n\n
3. Centrar un Div con CSS Grid y Auto Margins<\/h2>\n
Como siempre, apuntaremos al contenedor principal con display: grid<\/span>. Tambi\u00e9n asignaremos al div un margen autom\u00e1tico usando margin: auto<\/span>. Esto hace que el navegador calcule autom\u00e1ticamente el espacio disponible que rodea al div secundario y lo divida vertical y horizontalmente, colocando el div en el medio:<\/p>\n\n\n
article {\n  width: 100%;\n  min-height: 100vh;\n  background: black;\n  display: grid;\n}\n\ndiv {\n  width: 200px;\n  background: yellow;\n  height: 100px;\n  margin: auto; \/* nuevo *\/\n}<\/code><\/pre><\/div>\n\n\n
4. Centrar un div con CSS Grid y place-items<\/h2>\n
The place-items<\/span> property se utiliza para alinear elementos vertical y horizontalmente en una cuadr\u00edcula. Se puede usar para centrar nuestro div apuntando al contenedor de esta manera:<\/p>\n\n\n
article {\n  width: 100%;\n  min-height: 100vh;\n  background: black;\n  display: grid;\n  place-items: center; \/* nuevo *\/\n}\n\ndiv {\n  width: 200px;\n  background: yellow;\n  height: 100px;\n}<\/code><\/pre><\/div>\n\n\n\n
\nAl igual que la propiedad place-self<\/span>, place-items<\/span> es una forma abreviada de dos propiedades, en este caso justify-items<\/span> (horizontal) y align-items<\/span> (vertical). <\/p>\n\n\n\n
\nEn contraste con place-self<\/span>, place-items<\/span> se aplica al contenedor, lo que le da un poco menos de flexibilidad.\n<\/p>\n\n\n
Fin del art\u00edculo.<\/em><\/p>","protected":false},"excerpt":{"rendered":"
En este art\u00edculo, veremos cuatro formas de centrar horizontal y verticalmente un div usando CSS Grid. Por supuesto, estas t\u00e9cnicas de centrado se pueden utilizar en cualquier tipo de elemento. Configuraci\u00f3n inicial Primero, creemos un contenedor con un elemento de caja simple dentro que usaremos para demostrar estos m\u00e9todos de centrado. Aqu\u00ed est\u00e1 el HTML:<\/p>\n
Continuar leyendo   read_more<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[6],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","tag-css","entry"],"_links":{"self":[{"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":0,"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"wp:attachment":[{"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alejandro.uy\/blog\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}