A few points about block elements, margins, widths, borders, paddings

We have seen how margin-left: auto and margin-right: auto (or simpler, margin: auto) centres a block element. What does margin: auto really do? It makes the margins equal on each side, automatically adjusting the value to suit the context. This does not necessarily mean the content is centred:

• If the borders or the padding on left or right of the element to be centred are not even, then the content will not look centred.
• If the width is as much as the containing elements content width, then the content will not look centred.

Of course, you can control some of these things. But not always for all users because you cannot know that they will have browsers wider than the width you choose to try to make element centring work. But with modern widescreen monitors, it is often a safe bet.

The formula for what governs the actual values used in a modern browser that is in standards mode (not legacy or quirks) is:

At first glance this looks intuitive and clear. Think of an element as a package of bits, all the bits adding up to a total horizontal space taken up in a browser which is wide enough, and scrollable if not. What needs to be kept in mind, is that the width is not the package width but the content width, the bit that text and photos go into.

In the classic book "The Lopsided Ones" by the English 18th Century science fiction writer Jeremy Haddock, there is a tribe that hate the type of symmetry so many of us find so appealing. They prefer beings as well as other objects to have lopsided features. If they had been website makers, they would surely have avoided obvious symmetries like evenly thick left and right borders. They would do anything to avoid them! For example, they might have a left or right border but not both, or a left that is one size and a right that is quite different. This would be a typical crazy example (I emphasise, in case it should cause alarm, these are fictional beings):

Fig 5. <div><p style="border-right: 100px solid black; width: 200px;">text ...</p></div>

You can see at a glance that the green content area of the paragraph element is not itself centred with respect to the containing parent block. What is centred is the green and the black as a whole, the content area of the paragraph (where text and inline images go) together with its silly border. Similar considerations apply to padding. Here is a paragraph which has a large right padding but no left padding:

Fig 6. <div><p style="padding-right: 100px; width: 200px;">text ...text ... text ... text ... text ... text ...text ...</p></div>

Notice how the text wraps when it gets to the inside edge of the right padding. So, the text area, the middle of the content area is offset with respect to the parent container's middle. But the paragraph as a whole, both padding and author given explicit width together, 200px + 100px, does have its middle right at the middle of the parent.

Next we look at centring shrink-to-fit-boxes like tables.