{"id":58,"date":"2023-11-12T16:13:08","date_gmt":"2023-11-12T16:13:08","guid":{"rendered":"https:\/\/webmccannic.com\/?p=58"},"modified":"2023-11-12T16:25:57","modified_gmt":"2023-11-12T16:25:57","slug":"css-centering","status":"publish","type":"post","link":"https:\/\/webmccannic.com\/index.php\/2023\/11\/12\/css-centering\/","title":{"rendered":"CSS Centering"},"content":{"rendered":"\n<p>Centering elelments used to be pretty hard. Now, there&#8217;s lots of way to do it.<\/p>\n\n\n\n<p>Think about how how center things in real life.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>define the dimensions of the container<\/li>\n\n\n\n<li>measure the center point of the container and the child<\/li>\n\n\n\n<li>align both center points on both axis<\/li>\n<\/ul>\n\n\n\n<p>To do this on the web, define (or understand the default) dimensions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the width is by default, auto or 100% of the viewport<\/li>\n\n\n\n<li>define the height, the default is determined by the height of the content<\/li>\n\n\n\n<li>calculate the center points and align.<\/li>\n<\/ul>\n\n\n\n<p>The last step is easy with today&#8217;s browsers doing the calculation for you.<\/p>\n\n\n\n<p>So the simplest way to center one thing in the browser window:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">body {\ndisplay: grid;\nheight: 100vh;\nplace-items: center;\n}<\/code><\/pre>\n\n\n\n<p>Place-content will use the content box (the parent) to center items together,<br>while place-items will center the items using the available space (spreading them out) centering each item within the box of its parent.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Methods<\/h2>\n\n\n\n<p>Display grid the parent, margin: auto the content.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.autobot {\ndisplay: flex;\n}\n.autobot &gt; *{\nmargin: auto;\n }<\/code><\/pre>\n\n\n\n<p>You can center content in a full-width element by putting display: grid on the parent, with justify-content: center; giving a grid-template-column: one column with the width you want. minmax() works well here:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">```css\n.full-width-example {\n  display: grid;\n  grid-template-columns: minmax(300px, 600px);\n  justify-content: center;\n  background-color: rgb(255, 211, 130);\n }\n  ```<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Centering elelments used to be pretty hard. Now, there&#8217;s lots of way to do it. Think about how how center things in real life. To do this on the web, define (or understand the default) dimensions: The last step is easy with today&#8217;s browsers doing the calculation for you. So the simplest way to center [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-58","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/posts\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":6,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/posts\/58\/revisions\/66"}],"wp:attachment":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}