'How to center body on a page?

I'm trying to center the body element on my HTML page.

enter image description here

Basically, in the CSS I set the body element to be display: inline-block; so that it is only as wide as its contents. That works fine. However, margin: 0px auto; doesn't center it on the page.

Does anyone know how to fix this? I want the big blue square to be centered on the page, not floating to the left like it is now.

Here's my CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
htmlcsscentercentering


Solution 1:[1]

Also apply text-align: center; on the html element like so:

html {
  text-align: center;
}

A better approach though is to have an inner container div, which will be centralized, and not the body.

Solution 2:[2]

    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

This will work on most browsers, including IE.

Solution 3:[3]

You have to specify the width to the body for it to center on the page.

Or put all the content in the div and center it.

<body>
    <div>
    jhfgdfjh
    </div>
</body>?

div {
    margin: 0px auto;
    width:400px;
}

?

Solution 4:[4]

For those that do know the width, you could do something like

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

I also agree about not setting text-align:center on the body because it can mess up the rest of your code and you might have to individually set text-align:left on a lot of things either then or in the future.

Solution 5:[5]

Exploiting the flex layout is another option. Add to your CSS:

html {
    display: flex;
    justify-content: center;
}

Tested in Chrome, Edge, Firefox.

More Info can be found in the refs at MDN and hosts of online tutorials (this one seems handy as it is organized around container/item roles in the flex layout).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Freakishly
Solution 3 McGarnagle
Solution 4 DardanM
Solution 5

Related Questions