如何使用css3水平居中一个始终在顶（粘性）的元素？

Question

我需要在图像上实现目标。 我无法将菜单放在蓝色区域（水平中心+垂直顶部+粘性）

尝试使用位置：固定，但这是我能得到的最好的。

CSS：

.menu 
{   
position:fixed;
height: 40px;
width: 505px;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

提前致谢。

Answer 1

诀窍是将left设置为50%，然后使用相当于元素宽度一半的负margin-left将其拉回来：

.menu {   
    position:fixed;
    width: 505px;
    top: 0; left: 50%;
    margin-left: -252px; /* 505 / 2 */
}

这是小提琴：http://jsfiddle.net/heXR7/