{"id":3363,"date":"2026-10-15T19:31:01","date_gmt":"2026-10-15T19:31:01","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3363"},"modified":"2026-10-15T19:35:04","modified_gmt":"2026-10-15T19:35:04","slug":"centrar-en-css","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/centrar-en-css\/","title":{"rendered":"C\u00f3mo centrar en CSS (7 maneras)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Te traigo 7 maneras de <strong>centrar en CSS<\/strong>, y te aseguro que al menos una no la conoc\u00edas. Centrar un elemento es de lo primero que buscamos al maquetar, y aun as\u00ed seguimos copiando la misma soluci\u00f3n sin saber por qu\u00e9 funciona. (A todos nos ha pasado: el bot\u00f3n se queda pegado a la esquina y no hay manera de moverlo).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed vamos a centrar <strong>un mismo bot\u00f3n, vertical y horizontalmente<\/strong>, de 7 maneras distintas, m\u00e1s un bonus de la vieja escuela. Y empezamos por la menos conocida: hoy CSS ya te deja centrar con <code>align-content<\/code> sin activar Flexbox ni Grid.<\/p>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Respuesta r\u00e1pida<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para <strong>centrar un div, un bot\u00f3n o cualquier elemento en CSS<\/strong>, vertical y horizontalmente, la forma m\u00e1s corta es esta: <code>display: grid<\/code> y <code>place-items: center<\/code> en el contenedor. Funciona con uno o con varios hijos, y el contenedor necesita una altura mayor que la del elemento.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: grid;\n  place-items: center;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfVienes del Short o de TikTok? Debajo tienes las otras 7 maneras con su c\u00f3digo y una tabla para elegir.<\/p>\n<\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83e\udd47 7 Maneras para CENTRAR en CSS (De novato a EXPERTO)\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/kscgfXq0tWQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe0a7de2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ\" target=\"_blank\" rel=\"noreferrer noopener\">Ver el video en YouTube<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">En este tutorial<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resultado:<\/strong> un bot\u00f3n de reproducir centrado en la imagen de una tarjeta, resuelto de 8 formas.<\/li>\n\n\n\n<li><strong>Tecnolog\u00edas:<\/strong> HTML y CSS (<code>align-content<\/code>, <code>inset<\/code>, <code>margin<\/code>, Flexbox y Grid).<\/li>\n\n\n\n<li><strong>Nivel:<\/strong> principiante.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 vas a construir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una tarjeta de curso con un bot\u00f3n de reproducir encima de su imagen. El bot\u00f3n empieza pegado a una esquina y lo vamos centrando, siempre sobre el mismo HTML y cambiando solo el CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/centrar-en-css-antes-despues-v2.png\" alt=\"Tarjeta de curso con el bot\u00f3n de reproducir pegado a la esquina (antes) y centrado con place-items: center (despu\u00e9s)\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pru\u00e9balo aqu\u00ed:<\/strong> pulsa cada manera y mira c\u00f3mo se mueve el bot\u00f3n con el CSS que aparece al lado. Es el mismo c\u00f3digo que te explico m\u00e1s abajo.<\/p>\n\n\n\n<div><iframe title=\"Demo en vivo: 7 maneras de centrar en CSS\" width=\"100%\" height=\"480\" frameborder=\"0\" loading=\"lazy\" srcdoc=\"&lt;!doctype html&gt;&lt;html lang=&quot;es&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;&lt;style&gt;\n:root {\n  --bg: #16171B;\n  --surface: #1F2026;\n  --surface-2: #2A2C33;\n  --line: #FFFFFF14;\n  --text: #F2F0EE;\n  --muted: #A4A6AE;\n  --accent: #FF6B57;\n  --accent-soft: #FF6B5733;\n  --accent-line: #FF6B5747;\n  --on-accent: #1A0F0D;\n}\n*,::before,::after{margin:0;box-sizing:border-box}\nhtml{background:transparent}\nbody{padding:16px;border-radius:16px;font-family:system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg)}\n.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\n.tabs button{padding:8px 12px;font:600 13px ui-monospace,Menlo,monospace;color:var(--muted);background:#FFFFFF0D;border:1px solid #FFFFFF1F;border-radius:999px;cursor:pointer}\n.tabs button[aria-pressed=&quot;true&quot;]{color:var(--on-accent);background:var(--accent);border-color:transparent}\n.grid{display:grid;gap:16px}\n@media (min-width:640px){.grid{grid-template-columns:1fr 1fr;align-items:start}}\n.demo{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:20px}\npre{min-height:222px;padding:16px;overflow:auto;font:13px\/1.65 ui-monospace,Menlo,monospace;color:#E8E6E3;background:#0F1014;border:1px solid #FFFFFF14;border-radius:16px}\n\/* ---------- Contenedor ---------- *\/\n\n.card__container {\n  width: 100%;\n  height: 198px;\n\n  background:\n    linear-gradient(var(--accent-line), var(--accent-line)) center \/ 100% 1px no-repeat,\n    linear-gradient(var(--accent-line), var(--accent-line)) center \/ 1px 100% no-repeat,\n    radial-gradient(#FFFFFF1F 1px, transparent 1px) 0 0 \/ 16px 16px,\n    var(--surface-2);\n  border-radius: 16px;\n}\n\n\/* ---------- Bot\u00f3n play ---------- *\/\n\n.card__button {\n  width: 64px;\n  height: 64px;\n  padding: 19px;\n  display: block;\n\n  color: var(--on-accent);\n  background-color: var(--accent);\n  border-radius: 50%;\n  box-shadow:\n    0 0 0 8px var(--accent-soft),\n    0 12px 40px #FF6B5780;\n}\n\n\n\n.card__icon {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n  stroke: none;\n}\n\n\n.demo[data-m=&quot;1&quot;] .card__container {\n  display: block;\n  align-content: center;\n}\n\n.demo[data-m=&quot;1&quot;] .card__button {\n  margin-inline: auto;\n}\n.demo[data-m=&quot;2&quot;] .card__container {\n  position: relative;\n}\n\n.demo[data-m=&quot;2&quot;] .card__button {\n  position: absolute;\n  inset: 0;\n  place-self: center;\n}\n.demo[data-m=&quot;3&quot;] .card__container {\n  position: relative;\n}\n\n.demo[data-m=&quot;3&quot;] .card__button {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n}\n.demo[data-m=&quot;4&quot;] .card__container {\n  display: flex;\n}\n\n.demo[data-m=&quot;4&quot;] .card__button {\n  margin: auto;\n}\n.demo[data-m=&quot;5&quot;] .card__container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.demo[data-m=&quot;6&quot;] .card__container {\n  display: grid;\n  place-items: center;\n}\n.demo[data-m=&quot;7&quot;] .card__container {\n  display: grid;\n}\n\n.demo[data-m=&quot;7&quot;] .card__button {\n  place-self: center;\n}\n.demo[data-m=&quot;8&quot;] .card__container {\n  position: relative;\n}\n\n.demo[data-m=&quot;8&quot;] .card__button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n&lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;\n&lt;div class=&quot;tabs&quot; role=&quot;group&quot; aria-label=&quot;Elige una manera de centrar&quot;&gt;&lt;button type=&quot;button&quot; data-m=&quot;0&quot; aria-pressed=&quot;true&quot;&gt;Sin centrar&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;1&quot; aria-pressed=&quot;false&quot;&gt;1 \u00b7 align-content&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;2&quot; aria-pressed=&quot;false&quot;&gt;2 \u00b7 inset + place-self&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;3&quot; aria-pressed=&quot;false&quot;&gt;3 \u00b7 inset + margin&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;4&quot; aria-pressed=&quot;false&quot;&gt;4 \u00b7 flex + margin&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;5&quot; aria-pressed=&quot;false&quot;&gt;5 \u00b7 flex center&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;6&quot; aria-pressed=&quot;false&quot;&gt;6 \u00b7 place-items&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;7&quot; aria-pressed=&quot;false&quot;&gt;7 \u00b7 place-self&lt;\/button&gt;&lt;button type=&quot;button&quot; data-m=&quot;8&quot; aria-pressed=&quot;false&quot;&gt;Bonus \u00b7 translate&lt;\/button&gt;&lt;\/div&gt;\n&lt;div class=&quot;grid&quot;&gt;&lt;div class=&quot;demo&quot; data-m=&quot;0&quot;&gt;&lt;div class=&quot;card__container&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;card__button&quot; aria-label=&quot;Reproducir&quot;&gt;&lt;svg class=&quot;card__icon&quot; viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M8 5v14l11-7z&quot;\/&gt;&lt;\/svg&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\n&lt;pre&gt;&lt;code id=&quot;codigo&quot;&gt;&lt;\/code&gt;&lt;\/pre&gt;&lt;\/div&gt;\n&lt;script&gt;\nconst C={&quot;0&quot;: &quot;\/* Todav\u00eda sin centrar: solo el CSS base *\/&quot;, &quot;1&quot;: &quot;.card__container {\\n  display: block;\\n  align-content: center;\\n}\\n\\n.card__button {\\n  margin-inline: auto;\\n}&quot;, &quot;2&quot;: &quot;.card__container {\\n  position: relative;\\n}\\n\\n.card__button {\\n  position: absolute;\\n  inset: 0;\\n  place-self: center;\\n}&quot;, &quot;3&quot;: &quot;.card__container {\\n  position: relative;\\n}\\n\\n.card__button {\\n  position: absolute;\\n  inset: 0;\\n  margin: auto;\\n}&quot;, &quot;4&quot;: &quot;.card__container {\\n  display: flex;\\n}\\n\\n.card__button {\\n  margin: auto;\\n}&quot;, &quot;5&quot;: &quot;.card__container {\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n}&quot;, &quot;6&quot;: &quot;.card__container {\\n  display: grid;\\n  place-items: center;\\n}&quot;, &quot;7&quot;: &quot;.card__container {\\n  display: grid;\\n}\\n\\n.card__button {\\n  place-self: center;\\n}&quot;, &quot;8&quot;: &quot;.card__container {\\n  position: relative;\\n}\\n\\n.card__button {\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%, -50%);\\n}&quot;};\nconst demo=document.querySelector(&#x27;.demo&#x27;),code=document.getElementById(&#x27;codigo&#x27;),bs=document.querySelectorAll(&#x27;.tabs button&#x27;);\nconst ajustar=()=&gt;{if(window.frameElement)frameElement.style.height=document.body.offsetHeight+&#x27;px&#x27;};\nfunction ver(m){demo.dataset.m=m;code.textContent=C[m];bs.forEach(b=&gt;b.setAttribute(&#x27;aria-pressed&#x27;,b.dataset.m===m));ajustar()}\nbs.forEach(b=&gt;b.addEventListener(&#x27;click&#x27;,()=&gt;ver(b.dataset.m)));\ndocument.querySelector(&#x27;.card__button&#x27;).addEventListener(&#x27;click&#x27;,e=&gt;e.preventDefault());\naddEventListener(&#x27;resize&#x27;,ajustar);ver(&#x27;0&#x27;);\n&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\"><\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Y esta es la comparativa de las 8 formas, para que la tengas a mano:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>#<\/th><th>T\u00e9cnica<\/th><th>Se aplica en<\/th><th>Cu\u00e1ndo usarla<\/th><\/tr><\/thead><tbody><tr><td>1<\/td><td><code>align-content<\/code> + <code>margin-inline<\/code><\/td><td>Padre e hijo<\/td><td>Para centrar sin activar Flexbox ni Grid<\/td><\/tr><tr><td>2<\/td><td><code>position<\/code> + <code>inset<\/code> + <code>place-self<\/code><\/td><td>Padre e hijo<\/td><td>Cuando el elemento debe salir del flujo<\/td><\/tr><tr><td>3<\/td><td><code>position<\/code> + <code>inset<\/code> + <code>margin: auto<\/code><\/td><td>Padre e hijo<\/td><td>Igual que la 2, con margen autom\u00e1tico<\/td><\/tr><tr><td>4<\/td><td>Flexbox + <code>margin: auto<\/code><\/td><td>Padre e hijo<\/td><td>La m\u00e1s corta con Flexbox<\/td><\/tr><tr><td>5<\/td><td>Flexbox + <code>justify-content<\/code> y <code>align-items<\/code><\/td><td>Solo el padre<\/td><td>La cl\u00e1sica<\/td><\/tr><tr><td>6<\/td><td>Grid + <code>place-items<\/code><\/td><td>Solo el padre<\/td><td>La m\u00e1s corta de todas<\/td><\/tr><tr><td>7<\/td><td>Grid + <code>place-self<\/code><\/td><td>Padre e hijo<\/td><td>Cuando solo un hijo debe centrarse<\/td><\/tr><tr><td>Bonus<\/td><td><code>top<\/code>, <code>left<\/code> y <code>transform<\/code><\/td><td>Padre e hijo<\/td><td>La de antes: hoy casi no hace falta<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El Short dura menos de 2 minutos y va en este orden. Pulsa un momento para saltar a esa parte en YouTube:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=0s\" target=\"_blank\" rel=\"noopener\">0:00 Las 7 maneras de centrar en CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=9s\" target=\"_blank\" rel=\"noopener\">0:09 El HTML: contenedor y bot\u00f3n<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=15s\" target=\"_blank\" rel=\"noopener\">0:15 Manera 1: <code>align-content<\/code> sin Flexbox ni Grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=38s\" target=\"_blank\" rel=\"noopener\">0:38 Manera 2: <code>inset<\/code> y <code>place-self<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=48s\" target=\"_blank\" rel=\"noopener\">0:48 Manera 3: <code>inset<\/code> y <code>margin: auto<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=59s\" target=\"_blank\" rel=\"noopener\">0:59 Manera 4: Flexbox con <code>margin: auto<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=66s\" target=\"_blank\" rel=\"noopener\">1:06 Manera 5: Flexbox con <code>justify-content<\/code> y <code>align-items<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=74s\" target=\"_blank\" rel=\"noopener\">1:14 Manera 6: Grid con <code>place-items<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=84s\" target=\"_blank\" rel=\"noopener\">1:24 Manera 7: Grid con <code>place-self<\/code><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=kscgfXq0tWQ&amp;t=92s\" target=\"_blank\" rel=\"noopener\">1:32 Bonus: <code>top<\/code>, <code>left<\/code> y <code>translate<\/code><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 necesitas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un editor de c\u00f3digo, por ejemplo Visual Studio Code.<\/li>\n\n\n\n<li>Conocer lo b\u00e1sico de HTML y CSS: clases y <code>display<\/code>.<\/li>\n\n\n\n<li>Saber qu\u00e9 es <code>position: relative<\/code> ayuda, aunque lo repasamos en la manera 2.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Paso a paso<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">El c\u00f3digo base<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Todas las maneras parten del mismo proyecto: una tarjeta de curso con un contenedor <code>card__container<\/code> (el que tiene la imagen) y un hijo, el bot\u00f3n <code>card__button<\/code>. Este es el HTML, tal cual lo uso en el video. Ojo: no lo vamos a tocar en ning\u00fan momento, solo cambia el CSS.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;article class=\"card\"&gt;\n\n  &lt;!-- Contenedor --&gt;\n  &lt;div class=\"card__container\"&gt;\n\n    &lt;!-- Bot\u00f3n --&gt;\n    &lt;a href=\"#\" class=\"card__button\"&gt;\n      &lt;svg class=\"card__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"&gt;&lt;path d=\"M8 5v14l11-7z\" \/&gt;&lt;\/svg&gt;\n    &lt;\/a&gt;\n\n  &lt;\/div&gt;\n\n  &lt;!-- Contenido --&gt;\n  &lt;div class=\"card__content\"&gt;\n\n    &lt;header class=\"card__header\"&gt;\n      &lt;span class=\"card__label\"&gt;Curso \u00b7 01&lt;\/span&gt;\n      &lt;span class=\"card__badge\"&gt;Nuevo&lt;\/span&gt;\n      &lt;h1 class=\"card__title\"&gt;CSS moderno&lt;\/h1&gt;\n    &lt;\/header&gt;\n\n    &lt;p class=\"card__meta\"&gt;24 lecciones \u00b7 3 h 10 min \u00b7 Inicial&lt;\/p&gt;\n\n    &lt;!-- Acciones --&gt;\n    &lt;div class=\"card__actions\"&gt;\n\n      &lt;button class=\"card__cta\"&gt;Empezar curso&lt;\/button&gt;\n\n      &lt;button class=\"card__save\" aria-label=\"Guardar curso\"&gt;\n        &lt;svg class=\"card__save-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"&gt;&lt;path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" \/&gt;&lt;\/svg&gt;\n      &lt;\/button&gt;\n\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n\n&lt;\/article&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y este es el CSS base, sin centrar nada todav\u00eda. El contenedor mide 198 px de alto y el bot\u00f3n es un c\u00edrculo de 64 px con <code>display: block<\/code>, que ser\u00e1 importante en la manera 1. Con este c\u00f3digo el bot\u00f3n queda pegado a la esquina superior izquierda:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>\/* ---------- Tarjeta ---------- *\/\n\n.card {\n  width: min(360px, 100vw - 32px);\n  padding: 12px;\n\n  background-color: var(--surface);\n  border: 1px solid var(--line);\n  border-radius: 24px;\n  box-shadow: 0 30px 80px -10px #000B;\n}\n\n\/* ---------- Contenedor ---------- *\/\n\n.card__container {\n  width: 100%;\n  height: 198px;\n\n  background:\n    linear-gradient(var(--accent-line), var(--accent-line)) center \/ 100% 1px no-repeat,\n    linear-gradient(var(--accent-line), var(--accent-line)) center \/ 1px 100% no-repeat,\n    radial-gradient(#FFFFFF1F 1px, transparent 1px) 0 0 \/ 16px 16px,\n    var(--surface-2);\n  border-radius: 16px;\n}\n\n\/* ---------- Bot\u00f3n play ---------- *\/\n\n.card__button {\n  width: 64px;\n  height: 64px;\n  padding: 19px;\n  display: block;\n\n  color: var(--on-accent);\n  background-color: var(--accent);\n  border-radius: 50%;\n  box-shadow:\n    0 0 0 8px var(--accent-soft),\n    0 12px 40px #FF6B5780;\n}\n\n.card__icon {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n  stroke: none;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A partir de aqu\u00ed, cada manera es un bloque que a\u00f1ades al final de <code>styles.css<\/code>, bajo un comentario <code>Centrar<\/code>. Las variaciones solo tocan <code>.card__container<\/code> y <code>.card__button<\/code>; el resto de la tarjeta no cambia.<\/p>\n\n\n\n<div class=\"wp-block-group acg-steps is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 1: align-content sin Flexbox ni Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La menos conocida. Con <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/align-content\" target=\"_blank\" rel=\"noopener\"><code>align-content: center<\/code><\/a> en el contenedor, el contenido se centra en vertical aunque su <code>display<\/code> sea <code>block<\/code>: ya no hace falta activar Flexbox ni Grid. Para el eje horizontal, el bot\u00f3n recibe <code>margin-inline: auto<\/code>. Y listo: el bot\u00f3n queda en el centro. Funciona en Chrome, Edge, Firefox y Safari desde 2024, as\u00ed que ya puedes usarlo sin miedo en proyectos actuales.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: block;\n  align-content: center;\n}\n\n.card__button {\n  margin-inline: auto;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 2: position absolute con inset y place-self<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed el bot\u00f3n sale del flujo. El contenedor lleva <code>position: relative<\/code> para ser la referencia y el bot\u00f3n <code>position: absolute<\/code> con <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/inset\" target=\"_blank\" rel=\"noopener\"><code>inset: 0<\/code><\/a>, que toma todo el contenedor como espacio disponible. Como el bot\u00f3n mide menos que ese espacio, <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/place-self\" target=\"_blank\" rel=\"noopener\"><code>place-self: center<\/code><\/a> lo coloca justo en el medio. Si dudas entre esta t\u00e9cnica y Grid para apilar elementos, mira <a href=\"https:\/\/alexcgdesign.com\/blog\/css-grid-vs-position-absolute\/\">CSS Grid vs position absolute<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  position: relative;\n}\n\n.card__button {\n  position: absolute;\n  inset: 0;\n  place-self: center;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 3: position absolute con inset y margin auto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es casi igual a la anterior: solo cambias <code>place-self: center<\/code> por <code>margin: auto<\/code>. Con <code>inset: 0<\/code> el elemento tiene espacio libre a los cuatro lados, y los m\u00e1rgenes autom\u00e1ticos lo reparten a partes iguales, as\u00ed que queda centrado en vertical y en horizontal.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  position: relative;\n}\n\n.card__button {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 4: Flexbox con margin auto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Activas <code>display: flex<\/code> en el contenedor y le das <code>margin: auto<\/code> al bot\u00f3n. En un contenedor flex los m\u00e1rgenes autom\u00e1ticos absorben todo el espacio libre, de modo que el bot\u00f3n se centra sin necesidad de <code>justify-content<\/code> ni <code>align-items<\/code>. Es la versi\u00f3n m\u00e1s corta con Flexbox.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: flex;\n}\n\n.card__button {\n  margin: auto;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 5: Flexbox con justify-content y align-items<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La cl\u00e1sica. Todo se declara en el padre: <code>display: flex<\/code>, <code>justify-content: center<\/code> para el eje horizontal y <code>align-items: center<\/code> para el vertical. El hijo no necesita ninguna regla. Seguro que esta ya la conoc\u00edas: es la que m\u00e1s se ve, y funciona igual con uno o con varios hijos.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 6: CSS Grid con place-items<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con Grid basta activar <code>display: grid<\/code> y escribir <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Reference\/Properties\/place-items\" target=\"_blank\" rel=\"noopener\"><code>place-items: center<\/code><\/a> en el padre. Esa propiedad es la abreviatura de <code>align-items<\/code> y <code>justify-items<\/code>, as\u00ed que centra en los dos ejes con una sola l\u00ednea. Es la m\u00e1s corta de todas: dos l\u00edneas y listo.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: grid;\n  place-items: center;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Manera 7: CSS Grid con place-self<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Si solo quieres centrar un hijo y dejar el resto como est\u00e1, activas <code>display: grid<\/code> en el padre y pones <code>place-self: center<\/code> en el hijo. El resultado es el mismo, pero el control queda en el elemento que quieres mover.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  display: grid;\n}\n\n.card__button {\n  place-self: center;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Bonus: top, left y translate<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Y de bonus, la de la vieja escuela, la que se usaba antes de <code>margin: auto<\/code> con <code>inset<\/code>. El bot\u00f3n se posiciona en el 50 % de arriba y de la izquierda, pero as\u00ed su esquina queda en el centro, no el bot\u00f3n. Por eso se le resta la mitad de su propio tama\u00f1o con <code>translate(-50%, -50%)<\/code>. Sigue funcionando, pero hoy tienes opciones m\u00e1s cortas. Si la ves en c\u00f3digo antiguo, ya sabes de d\u00f3nde sale.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__container {\n  position: relative;\n}\n\n.card__button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Cu\u00e1l elegir seg\u00fan el caso<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Un elemento o varios, y quieres lo m\u00e1s corto:<\/strong> Grid con <code>place-items: center<\/code> (manera 6).<\/li>\n\n\n\n<li><strong>Solo un hijo debe centrarse:<\/strong> Grid con <code>place-self: center<\/code> (manera 7) o Flexbox con <code>margin: auto<\/code> (manera 4).<\/li>\n\n\n\n<li><strong>Ya usas Flexbox para alinear el resto:<\/strong> <code>justify-content<\/code> y <code>align-items<\/code> (manera 5).<\/li>\n\n\n\n<li><strong>El elemento debe flotar sobre otro, como un bot\u00f3n sobre una imagen o un modal:<\/strong> <code>position: absolute<\/code> con <code>inset: 0<\/code> y <code>margin: auto<\/code> (manera 3).<\/li>\n\n\n\n<li><strong>No quieres activar ning\u00fan modelo de maquetaci\u00f3n:<\/strong> <code>align-content<\/code> con <code>margin-inline: auto<\/code> (manera 1).<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--warn is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Cuidado<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las formas 2, 3 y el bonus usan <code>position: absolute<\/code>, as\u00ed que el bot\u00f3n <strong>sale del flujo<\/strong>: el contenedor no reserva su espacio y no crece con \u00e9l. Si el contenedor no tiene una altura propia, quedar\u00e1 sin altura y no ver\u00e1s el bot\u00f3n centrado. Si el bot\u00f3n forma parte del contenido, elige Flexbox o Grid (en <a href=\"https:\/\/alexcgdesign.com\/blog\/css-grid-vs-position-absolute\/\">Grid vs position absolute<\/a> explico cu\u00e1ndo conviene cada una).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Consejo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si dudas, usa <code>display: grid<\/code> con <code>place-items: center<\/code>: son dos l\u00edneas, sirven para uno o varios hijos y no necesitas recordar qu\u00e9 propiedad va en el padre y cu\u00e1l en el hijo.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-cta acg-cta--sponsor is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Patrocinador oficial del curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Publica tus proyectos con Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hostinger es el patrocinador oficial del curso. Si quieres publicar estos ejemplos en internet con tu propio dominio, entra con el enlace de AlexCG Design y aprovecha el descuento.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">Obtener el descuento<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfCu\u00e1l es la mejor forma de centrar un div en CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depende del caso, pero la m\u00e1s corta y f\u00e1cil de recordar es Grid: <code>display: grid<\/code> con <code>place-items: center<\/code> en el padre. Si necesitas que el elemento salga del flujo, como un modal o un bot\u00f3n sobre una imagen, usa <code>position: absolute<\/code> con <code>inset: 0<\/code> y <code>margin: auto<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfSe puede centrar en CSS sin Flexbox ni Grid?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00ed. Con <code>align-content: center<\/code> en el contenedor y <code>margin-inline: auto<\/code> en el hijo, el elemento queda centrado aunque el <code>display<\/code> sea <code>block<\/code>. Tambi\u00e9n se puede con <code>position: absolute<\/code>, <code>inset: 0<\/code> y <code>margin: auto<\/code>, sin activar ning\u00fan modelo de maquetaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo centrar vertical y horizontalmente con CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Con Flexbox usas <code>justify-content: center<\/code> y <code>align-items: center<\/code>. Con Grid, <code>place-items: center<\/code>. Con posici\u00f3n absoluta, <code>inset: 0<\/code> y <code>margin: auto<\/code>. En todos los casos, el contenedor necesita una altura mayor que la del elemento para que haya espacio que repartir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfPara qu\u00e9 sirve place-items en CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es la abreviatura de <code>align-items<\/code> y <code>justify-items<\/code>. En un contenedor con <code>display: grid<\/code> coloca todos los hijos dentro de su celda, en vertical y en horizontal a la vez. Con <code>place-items: center<\/code> se centran los dos ejes con una sola l\u00ednea.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfPor qu\u00e9 no se centra mi elemento en CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Casi siempre es una de tres cosas: el contenedor no tiene m\u00e1s alto que el elemento y no hay espacio que repartir, en un contenedor normal (<code>display: block<\/code>) el hijo es <code>inline<\/code>, como un <code>&lt;a&gt;<\/code> o un <code>&lt;span&gt;<\/code>, y <code>margin: auto<\/code> no le afecta (dale <code>display: block<\/code>), o la regla est\u00e1 en el elemento equivocado (<code>place-items<\/code> va en el padre y <code>place-self<\/code> en el hijo). Revisa tambi\u00e9n que el contenedor tenga <code>display: flex<\/code> o <code>display: grid<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora dime: \u00bfcu\u00e1l de las 8 maneras prefieres y cu\u00e1l no conoc\u00edas? D\u00e9jamelo en los comentarios del video.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e1s proyectos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/css-grid-vs-position-absolute\/\">CSS Grid vs position absolute: cu\u00e1ndo usar cada uno<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/dropdown-css\/\">C\u00f3mo crear un dropdown men\u00fa con CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/3-caracteristicas-css\/\">3 caracter\u00edsticas que no conoc\u00edas de CSS<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group acg-cta is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Domina CSS desde cero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Estoy preparando un curso de CSS donde Grid, Flexbox y position se explican con proyectos reales.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alexcgdesign.com\/cursocss\">Ver el curso<\/a><\/div>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Centrar en CSS de 7 maneras (+1 bonus): align-content, inset, Flexbox y Grid. Con el c\u00f3digo de cada una, demo en vivo y una tabla para elegir.<\/p>\n","protected":false},"author":1,"featured_media":3366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"2026-10-15","footnotes":""},"categories":[39,2],"tags":[],"class_list":["post-3363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutoriales","category-diseno-web"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3363"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3366"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}