{"id":616,"date":"2023-11-22T18:46:35","date_gmt":"2023-11-22T18:46:35","guid":{"rendered":"https:\/\/raymundopizano.com\/blog\/?p=616"},"modified":"2024-08-07T04:01:25","modified_gmt":"2024-08-07T04:01:25","slug":"616","status":"publish","type":"post","link":"https:\/\/raymundopizano.com\/blog\/html-y-css\/616\/","title":{"rendered":"Como centrar un div con CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Con CSS Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para centrar un div con Grid Layout definimos body como nuestra etiqueta contenedora y obtenemos el largo de manera din\u00e1mica con height: 100vh; viewport height, es decir que cada que se cambie el tama\u00f1o del largo este valor se actualizara recalculando la posici\u00f3n de nuestro div.circulo.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Centrar un DIV con Grid&lt;\/title&gt;\n    &lt;style&gt;\n        body{\n            display: grid;\n            place-content: center;\n            height: 100vh;\n        }\n        .circulo{\n            width: 70px;\n            height: 70px;\n            background-color: red;\n            border-radius: 50%;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;circulo&quot;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!<\/span><span style=\"color: #F92672\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">lang<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;es&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">charset<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">content<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;Centrar un DIV con Grid&lt;\/<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">grid<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">place-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">.circulo<\/span><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">red<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;circulo&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEwoezj\" src=\"\/\/codepen.io\/anon\/embed\/ZEwoezj?height=700&amp;theme-id=1&amp;slug-hash=ZEwoezj&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEwoezj\" title=\"CodePen Embed ZEwoezj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Con CSS Flexbox<\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Centrar un DIV con Flexbox&lt;\/title&gt;\n    &lt;style&gt;\n      body {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 100vh;\n      }\n      .cuadro {\n        width: 70px;\n        height: 70px;\n        background-color: blue;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=&quot;cuadro&quot;&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!<\/span><span style=\"color: #F92672\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">lang<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;es&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">charset<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">content<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;Centrar un DIV con Flexbox&lt;\/<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">flex<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">justify-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">align-items<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #A6E22E\">.cuadro<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">70<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">background-color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">blue<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;cuadro&quot;<\/span><span style=\"color: #F8F8F2\">&gt;&lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWROroG\" src=\"\/\/codepen.io\/anon\/embed\/QWROroG?height=450&amp;theme-id=1&amp;slug-hash=QWROroG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWROroG\" title=\"CodePen Embed QWROroG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Con CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creamos un contenedor del tama\u00f1o del ancho width: 100%; y del alto height: 100vh; viewport height del navegador, estos valores son din\u00e1micos es decir en cuanto cambie el tama\u00f1o del navegador el contenedor seguir\u00e1 del tama\u00f1o de este., el div lo centramos con top y left calculando el 50% del tama\u00f1o del navegador menos la mitad del tama\u00f1o del elemento para que nos quede al centro de este.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Centrar un Div con CSS&lt;\/title&gt;\n    &lt;style&gt;\n        .container {\n            width: 100%;\n            height: 100vh;\n            position: relative;\n        }\n        .bredondo{\n            width: 64px;\n            height: 64px;\n            border-radius: 25%;\n            position: absolute;\n            background: green;\n            top: calc(50% - 32px);\n            left: calc(50% - 32px);\n        }\n        \n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;bredondo&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!DOCTYPE <\/span><span style=\"color: #F92672\">html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> lang=&quot;es&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> charset=&quot;UTF-8&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> name=&quot;viewport&quot; content=&quot;width=<\/span><span style=\"color: #F92672\">device-width<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #F92672\">initial-scale<\/span><span style=\"color: #F8F8F2\">=1.0&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title&gt;<\/span><span style=\"color: #F8F8F2\">Centrar un <\/span><span style=\"color: #F92672\">Div<\/span><span style=\"color: #F8F8F2\"> con CSS&lt;\/<\/span><span style=\"color: #F92672\">title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">.container<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">relative<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">.bredondo<\/span><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">64<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">64<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">25<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">absolute<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">background<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">green<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">top<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">calc<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">32<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">left<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">calc<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #F92672\">-<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">32<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> class=&quot;container&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> class=&quot;bredondo&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNBVvPm\" src=\"\/\/codepen.io\/anon\/embed\/WNBVvPm?height=450&amp;theme-id=1&amp;slug-hash=WNBVvPm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNBVvPm\" title=\"CodePen Embed WNBVvPm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Centrar un Div con CSS&lt;\/title&gt;\n    &lt;style&gt;\n        .container {\n            width: 100%;\n            height: 100vh;\n            position: relative;\n        }\n        .bredondo{\n            width: 64px;\n            height: 64px;\n            border-radius: 25%;\n            position: absolute;\n            background: blueviolet;\n            inset: 0;\n            margin: auto;\n        }\n        \n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;bredondo&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!DOCTYPE <\/span><span style=\"color: #F92672\">html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> lang=&quot;es&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> charset=&quot;UTF-8&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> name=&quot;viewport&quot; content=&quot;width=<\/span><span style=\"color: #F92672\">device-width<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #F92672\">initial-scale<\/span><span style=\"color: #F8F8F2\">=1.0&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title&gt;<\/span><span style=\"color: #F8F8F2\">Centrar un <\/span><span style=\"color: #F92672\">Div<\/span><span style=\"color: #F8F8F2\"> con CSS&lt;\/<\/span><span style=\"color: #F92672\">title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">.container<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">relative<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #A6E22E\">.bredondo<\/span><span style=\"color: #F8F8F2\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">64<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">64<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">border-radius<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">25<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">absolute<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">background<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">blueviolet<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">inset<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">            <\/span><span style=\"color: #66D9EF; font-style: italic\">margin<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">auto<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> class=&quot;container&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> class=&quot;bredondo&quot;<\/span><span style=\"color: #F92672\">&gt;<\/span><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNqOYmz\" src=\"\/\/codepen.io\/anon\/embed\/WNqOYmz?height=450&amp;theme-id=1&amp;slug-hash=WNqOYmz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNqOYmz\" title=\"CodePen Embed WNqOYmz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Con CSS Grid Para centrar un div con Grid Layout definimos body como nuestra etiqueta contenedora y obtenemos el largo de manera din\u00e1mica con height: 100vh; viewport height, es decir que cada que se cambie el tama\u00f1o del largo este valor se actualizara recalculando la posici\u00f3n de nuestro div.circulo. Con CSS Flexbox Con CSS Creamos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-y-css"],"_links":{"self":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/comments?post=616"}],"version-history":[{"count":29,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":1759,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/616\/revisions\/1759"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media\/626"}],"wp:attachment":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media?parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/categories?post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/tags?post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}