That is only because you are looking at it in Internet Explorer, which
applies text-align to block elements although it shouldn't. If you look
at it in a more standards compliant browser, the grid isn't centered.

You applied the margin to the div, not to the item as I said. However,
as the div doesn't have a specific size, the margin will still be zero.
If you want to center a block, it has to have a specific width.

That's because you tried to use both methods. An element can't be both a
block element and an inline element.