Blog Post

Automatic Undeading

If you want to center an element horizontally within its parent element using margins, you need to set it to display block (if it’s already a block-level element you don’t need to set it explicitly), you need to have defined a width, and then you can use margin: auto;

<div class="centering-the-zombie">Zombie</div>Code language: HTML, XML (xml)
.centering-the-zombie {
    display: block;
    width: 100px;
    margin: auto;
}Code language: CSS (css)

You can also set the top and bottom margin using the shortcut property and still set the left and right margin to auto like so

margin: 1em auto;