CSS位置固定和边距0自动答案

【问题标题】：CSS position fixed AND margin 0 autoCSS位置固定和边距0自动
【发布时间】：2014-03-31 14:51:43
【问题描述】：

所以我有一个带有以下 css 的背景图片：

 body{
    background-image:url(cover.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
}

背景图片宽度为 1280 像素。所以我希望我的导航栏固定并以背景为中心。但是我遇到了问题。这是我的代码。

#navigation {
margin: 0 auto;
position:fixed;
top: 0;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
}

但导航栏会固定但不会居中。如果我删除固定的，它将居中但它不固定。

有什么方法可以做到这一点？

【问题讨论】：

Position absolute and margin: auto 的可能重复项
添加 html 的 sn-p 会有所帮助
如何添加 html 帮助？ <html> <head> <link rel="stylesheet" type="text/css" href="page.css"> </head> <body> <div id="navigation"> </div> </body> </html>

标签： css position margin

【解决方案1】：

使用样式创建.container div：

//no float!
width:960px;
possition:relative;
margin:0; //centers

然后用这个容器创建固定的导航栏:)

position:fixed;
float:left;
width:100%;
height:50px;

所以现在导航栏固定在居中的容器中。

您可能需要在此代码上编辑的唯一内容是 top。

【讨论】：

【解决方案2】：

Fixed 和 auto 是两个不同的东西，你不能同时称它们。更好的解决方案是制作一个容器 div，使用 margin:0 auto 将其居中，将背景代码从正文添加到它并将其从正文中取出，然后制作另一个 div 并将导航放在那里。您可能还想在该容器 div 上设置高度。

<div class="container">
   <div class="nav">
       <!-- nav here -->
   </div>
</div>

【讨论】：

【解决方案3】：

您可以进行以下操作

#navigation {
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width: 1280px;
    height: 35px;
    padding-top: 10px;
    background-color: #000000;
}

【讨论】：

width:100% 也可以！太赞了。我在其下方相对定位的元素中添加了填充，该元素在执行此操作后折叠起来。

【解决方案4】：

.fixed-centered {
    position: fixed; 
    left: 50%;
    transform: translate(-50%);
}

【讨论】：