Centering your website using max-width and auto margins
Often times it is useful to be able to center your website in a browser window. There are several ways to accomplish this task. In this snippet, we will explore two of those options.
Technique 1
The simple and most "sweeping" way to center your content in a browser window is to apply some CSS to the body
tag. Add the code below to your CSS file in the template builder to center your website using the body
tag. The max-width
does exactly what it says, it sets a maximum width for the center content. The margin
declaration is what centers the content in the browser window. The "0" sets the top
and bottom margin
to "0" and the "auto" sets the right
and left margin
to "auto" which is what actually centers the content.
body {
max-width: 1080px;
margin: 0 auto !important;
float: none !important;
}
Technique 2
In this technique, we are going to use the same max-width
and margin
code from above, but we are going to apply it to a different part of the HTML. Here we are going to add the max-width
and margin
code to the .header-container
, .body-container
, and .footer-container
.
Here is what that CSS would look like:
.header-container, .body-container, .footer-container {
max-width: 1080px;
margin: 0 auto;
}