CSS margin auto center with top margin - VALID?

Question

Is this valid CSS to center the div and also apply a top margin?

div {
     margin: 0 auto;
     margin-top: 30px;
     }

Answer 1

Use the following to specify margins:

div { margin: 30px auto 0; }

Which is shorthand for:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

Which is shorthand for:

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Now that you know the different ways margins, and/or padding, can be specified; the choice is yours.

As far a precedence is concerned the later definition will apply; as defined in the spec.

To find the value for an element/property combination, user agents must apply the following sorting order:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.
2. The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. For "!important" declarations, user style sheets override author style sheets which override the default style sheet. "!important" declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.
3. The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. It is therefore important that the user agent give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu.

As others have mentioned, you'll likely need to specify a fixed width in order to see your div centered ...