{"id":4280,"date":"2019-03-01T09:27:16","date_gmt":"2019-03-01T09:27:16","guid":{"rendered":"http:\/\/w3bits.com\/?p=4280"},"modified":"2019-03-11T06:10:52","modified_gmt":"2019-03-11T06:10:52","slug":"css-centered-layout","status":"publish","type":"post","link":"https:\/\/w3bits.com\/css-centered-layout\/","title":{"rendered":"The Correct Way to Center-align Web Layouts"},"content":{"rendered":"<p>Surely you know about the web layouts aligned to the center of the browser window. Centering a website with CSS is not a big deal at all. In this tutorial, we are going to learn the correct way to center-align a web layout.<\/p>\n<p>There are several thousand examples of centered layouts on web. One of such examples is this website only. I&#8217;m attaching a screenshot below to keep this contextual to the current centered layout I&#8217;m using right now.<\/p>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg\" alt=\"Example of a centered web layout\"><figcaption>This is how a centered website looks like. Also see its <a href=\"https:\/\/w3bits.com\/labs\/css-centered-layout\/\" target=\"_blank\" rel=\"external noopener noreferrer\">live demo<\/a><\/figcaption><\/figure>\n<p>Centering of layout is not limited to the fixed-width layouts only. They may greatly improve the usability in the hybrid full-width layouts too.<\/p>\n<h2>The Concept<\/h2>\n<p>When I started out as a web designer, I didn&#8217;t care much about the technique and flexibility of the design. I used to layout things strictly based on whatever I designed, and that was pretty much it.<\/p>\n<p>Later on I developed a habit to see things closely, and how they are going to perform in the browser. I came to know some mistakes I was committing when I observed how my layouts look on different screens.<\/p>\n<p>Center-aligning websites horizontally is one of those things which I was doing wrong. In short, listed below are some mistakes I made in that context and viewport responsiveness:<\/p>\n<ul>\n<li>Inflexible width of the layout or content wrapper<\/li>\n<li>Usage of text alignment CSS module to center align the layout<\/li>\n<\/ul>\n<h3>Flexible width of the wrapper<\/h3>\n<p>The first thing that comes to mind when centering the layout is setting the width. Now if you go by defining the width exclusively, you may have to do it for different breakpoints.<\/p>\n<p>It&#8217;s always a better practice to define the inclusive or <em>maximum width<\/em> instead, for the wrapper. This keeps you from defining and overriding the exclusive width again-and-again.<\/p>\n<p>Feel free to modify the highlighted values you are going to see in the code blocks below.<\/p>\n<h4>HTML<\/h4>\n<p>Assuming you are well aware of HTML and CSS, let&#8217;s start with the basic layout we are going to implement here.<\/p>\n<pre class=\"prettyprint\"><code>&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"content-wrapper\"&gt;\r\n    &lt;!-- Everything else goes here. --&gt;\r\n  &lt;\/div&gt;&lt;!-- .content-wrapper --&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>Note that the <code>&lt;html&gt;<\/code> and <code>&lt;body&gt;<\/code> by default acquire all the available rendering space in the browser window. In other words, they have their width and height attributes set to 100% already.<\/p>\n<h4>CSS<\/h4>\n<pre class=\"prettyprint\"><code>.content-wrapper {\r\n  max-width: <mark>960px<\/mark>;\r\n}<\/code><\/pre>\n<h3>Semantical alignment of the layout<\/h3>\n<p>Aligning the layout with the help of text-alignment properties doesn&#8217;t sound very semantically sane. Today we have magical CSS modules like Flexbox and Grid to streamline the alignment task.<\/p>\n<p>In fact I have a separate <a href=\"https:\/\/w3bits.com\/css-absolute-centering\/\" rel=\"noopener noreferrer\" target=\"_blank\">guide for absolute centering with CSS<\/a>.<\/p>\n<p>But wait. How about the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/margin\" rel=\"noopener external noreferrer\" target=\"_blank\">margin property in CSS<\/a>?<\/p>\n<p>If you&#8217;ve heard of and used CSS auto-margin, you know what I&#8217;m talking about. Couple it with some inclusively-sized element, and you have it aligned centered horizontally.<\/p>\n<pre class=\"prettyprint\"><code>.content-wrapper {\r\n  margin-right: auto;\r\n  margin-left: auto;\r\n  max-width: <mark>960px<\/mark>;\r\n}<\/code><\/pre>\n<p>Make sure the element you target is block-level. You may also make this centered block utility reusable by following like below:<\/p>\n<pre class=\"prettyprint\"><code>.centered-block-x {\r\n  display: block;\r\n  margin-right: auto;\r\n  margin-left: auto;\r\n  max-width: <mark>960px<\/mark>;\r\n}<\/code><\/pre>\n<p><a href=\"https:\/\/w3bits.com\/labs\/css-centered-layout\/\" target=\"_blank\" rel=\"external noopener noreferrer\" class=\"btn btn--wi\">Horizontally Centered Web Layout Demo<\/a><\/p>\n<h3>Vertical Centering the layout<\/h3>\n<p>Vertically-centered layouts are in the same vein to the horizontal ones. The only difference is that you write properties suitable to the y-axis instead of x-axis.<\/p>\n<pre class=\"prettyprint\"><code>.centered-block-y {\r\n  display: block;\r\n  margin-top: auto;\r\n  margin-bottom: auto;\r\n  max-height: <mark>500px<\/mark>;\r\n}<\/code><\/pre>\n<p>Horizontal centering is much more common than that of vertical centering of layouts.<\/p>\n<h2>Absolutely-centered layouts<\/h2>\n<p>We now know the right way to center our web layout both vertically and horizontally. What about absolute centering it on both the axes?<\/p>\n<p>Have a look at the below CSS for instance.<\/p>\n<pre class=\"prettyprint\"><code>.centered-block {\r\n  display: block;\r\n  margin: auto;\r\n  max-height: <mark>500px<\/mark>;\r\n  max-width: <mark>500px<\/mark>;\r\n}<\/code><\/pre>\n<h3>In conclusion<\/h3>\n<p>Whew! That was easy, wasn&#8217;t it? That was how I and most of the front-end web developers center their websites and containers. As always, suggestions and questions are welcomed. Feel free to share what is your experience with centering your websites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.<\/p>\n","protected":false},"author":1,"featured_media":4290,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The CORRECT Way to Center Align Website layouts<\/title>\n<meta name=\"description\" content=\"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/w3bits.com\/css-centered-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The CORRECT Way to Center Align Website layouts\" \/>\n<meta property=\"og:description\" content=\"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/w3bits.com\/css-centered-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"W3Bits\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-01T09:27:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-11T06:10:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"355\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rahul\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@w3bits_\" \/>\n<meta name=\"twitter:site\" content=\"@w3bits_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/\",\"url\":\"https:\/\/w3bits.com\/css-centered-layout\/\",\"name\":\"The CORRECT Way to Center Align Website layouts\",\"isPartOf\":{\"@id\":\"https:\/\/w3bits.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg\",\"datePublished\":\"2019-03-01T09:27:16+00:00\",\"dateModified\":\"2019-03-11T06:10:52+00:00\",\"author\":{\"@id\":\"https:\/\/w3bits.com\/#\/schema\/person\/be0e5389728f04fca3db34bad77ef1ac\"},\"description\":\"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/w3bits.com\/css-centered-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage\",\"url\":\"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg\",\"contentUrl\":\"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg\",\"width\":800,\"height\":355},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/w3bits.com\/css-centered-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/w3bits.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Correct Way to Center-align Web Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/w3bits.com\/#website\",\"url\":\"https:\/\/w3bits.com\/\",\"name\":\"W3Bits\",\"description\":\"Web Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/w3bits.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/w3bits.com\/#\/schema\/person\/be0e5389728f04fca3db34bad77ef1ac\",\"name\":\"Rahul\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/w3bits.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e574a987fbce499dc42961a23e1dfd9bfddadff03a41086b4eea64154d266b29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e574a987fbce499dc42961a23e1dfd9bfddadff03a41086b4eea64154d266b29?s=96&d=mm&r=g\",\"caption\":\"Rahul\"},\"description\":\"I'm Rahul, a web enthusiast and the person responsible for all the content you read here on W3Bits.\",\"url\":\"https:\/\/w3bits.com\/author\/meadminrahul9\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The CORRECT Way to Center Align Website layouts","description":"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/w3bits.com\/css-centered-layout\/","og_locale":"en_US","og_type":"article","og_title":"The CORRECT Way to Center Align Website layouts","og_description":"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.","og_url":"https:\/\/w3bits.com\/css-centered-layout\/","og_site_name":"W3Bits","article_published_time":"2019-03-01T09:27:16+00:00","article_modified_time":"2019-03-11T06:10:52+00:00","og_image":[{"width":800,"height":355,"url":"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg","type":"image\/jpeg"}],"author":"Rahul","twitter_card":"summary_large_image","twitter_creator":"@w3bits_","twitter_site":"@w3bits_","twitter_misc":{"Written by":"Rahul","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/w3bits.com\/css-centered-layout\/","url":"https:\/\/w3bits.com\/css-centered-layout\/","name":"The CORRECT Way to Center Align Website layouts","isPartOf":{"@id":"https:\/\/w3bits.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage"},"image":{"@id":"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg","datePublished":"2019-03-01T09:27:16+00:00","dateModified":"2019-03-11T06:10:52+00:00","author":{"@id":"https:\/\/w3bits.com\/#\/schema\/person\/be0e5389728f04fca3db34bad77ef1ac"},"description":"A how to guide to center a website: the right and robust method to achieve centered layouts with no hacky stuff but just CSS.","breadcrumb":{"@id":"https:\/\/w3bits.com\/css-centered-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/w3bits.com\/css-centered-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/w3bits.com\/css-centered-layout\/#primaryimage","url":"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg","contentUrl":"https:\/\/w3bits.com\/wp-content\/uploads\/centered-layout-example.jpg","width":800,"height":355},{"@type":"BreadcrumbList","@id":"https:\/\/w3bits.com\/css-centered-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/w3bits.com\/"},{"@type":"ListItem","position":2,"name":"The Correct Way to Center-align Web Layouts"}]},{"@type":"WebSite","@id":"https:\/\/w3bits.com\/#website","url":"https:\/\/w3bits.com\/","name":"W3Bits","description":"Web Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/w3bits.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/w3bits.com\/#\/schema\/person\/be0e5389728f04fca3db34bad77ef1ac","name":"Rahul","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/w3bits.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e574a987fbce499dc42961a23e1dfd9bfddadff03a41086b4eea64154d266b29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e574a987fbce499dc42961a23e1dfd9bfddadff03a41086b4eea64154d266b29?s=96&d=mm&r=g","caption":"Rahul"},"description":"I'm Rahul, a web enthusiast and the person responsible for all the content you read here on W3Bits.","url":"https:\/\/w3bits.com\/author\/meadminrahul9\/"}]}},"_links":{"self":[{"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/posts\/4280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/comments?post=4280"}],"version-history":[{"count":14,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/posts\/4280\/revisions"}],"predecessor-version":[{"id":4383,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/posts\/4280\/revisions\/4383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/media\/4290"}],"wp:attachment":[{"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/media?parent=4280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/categories?post=4280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/w3bits.com\/wp-json\/wp\/v2\/tags?post=4280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}