CSS页边距自动居中与上边距-有效？

Question

这是一个有效的CSS来居中div并应用一个上边距吗？

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

Answer 1

使用以下选项指定页边距：

div { margin: 30px auto 0; }

简写为：

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

简写为：

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

既然您已经了解了指定margin和/或padding的不同方式，就由您来选择吧。

就优先级而言，将适用后一种定义；如the spec中所定义的。

要查找元素/属性组合的值，用户代理必须应用以下排序顺序：

1. 查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与question.
2. The中的元素匹配，则应用声明。声明的主要排序是按权重和原点排序:对于普通声明，作者样式表会覆盖覆盖默认样式表的用户样式表。对于"!important“声明，用户样式表会覆盖author样式表，而author样式表会覆盖默认样式表。"!important“声明覆盖普通声明。导入的样式表与导入它的样式表具有相同的来源。
3. 次要排序是由选择器的特性决定的:更具体的选择器将覆盖更通用的选择器。伪元素和伪类被视为正常的元素和类，按指定的顺序进行respectively.
4. Finally，排序:如果两个规则具有相同的权重、原点和特异性，则以指定的规则为准。导入的样式表中的规则被视为在样式表itself.

中的任何规则之前

除了在单个声明上设置"!important“之外，这种策略赋予作者的样式表比读者的样式表更高的权重。因此，重要的是，用户代理给予用户关闭特定样式表的影响的能力，例如，通过下拉菜单。

正如其他人所提到的，你可能需要指定一个固定的宽度才能看到你的div居中。

Answer 2

是的，但是对于居中的div，你也需要对它应用width。

Answer 3

是。他们是对的：

div { width: 90%; margin : 30px auto 0 auto; }

我通常使用90%的宽度作为一个很好的起点。