将 div 边距定位到顶部 30px，但使用边距自动将边距保持在中心？答案

【问题标题】：Position div margin top 30px but keep margin in centre using margin auto?将 div 边距定位到顶部 30px，但使用边距自动将边距保持在中心？
【发布时间】：2015-05-29 02:53:49
【问题描述】：

让我的 div 将页面下移 30 像素/在我的 div 顶部添加 30 像素的边距时遇到问题。我的 div 使用自动边距在页面中心对齐。

但是，当我尝试添加这行代码时：边距：30px 自动 0 自动；

没有显示上边距？请问有人可以告诉我我做错了什么吗？谢谢，

#content_other{
width:790px;
height: auto;
font-family: 'Arial Narrow', Tahoma, Verdana, Arial Narrow, sans-serif;
font-size:12px;
margin: 30px auto 0 auto;
position:relative;
overflow: hidden;
padding:20px;
background:#fff;
border: 1px solid #999;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;


}

html:

<div id="content_other">

<html form here>

</div>

【问题讨论】：

它在谷歌浏览器中对我有用
你的代码绝对没问题 :) 但是让我知道你在哪个浏览器中遇到了这个问题。

标签： html css margin

【解决方案1】：

您的代码没有问题。看看这个JSFiddle。边距被添加到顶部我使用了这个 HTML

<div id="content_other">
    <form>
        <input type="text" />
    </form>
</div>

【讨论】：

【解决方案2】：

如果页面上的其他内容正在影响您的整个页面 CSS，请尝试在 margin-top 中添加重要信息以提升它并覆盖其他可能会取消该规则的内容。

margin: 30px auto 0 auto !important;

【讨论】：

【解决方案3】：

这取决于它周围的容器，所以我们需要查看完整的 HTML。您可以添加一个内部包装器并将其浮动：

<div id="content_other">
    <div id="float-wrap">
        <html form here>
    </div>
</div>

#float-wrap {
    float: left;
    width: 100%;
    margin-top: 30px;
}

【讨论】：