Html 如何使用css3将始终位于顶部（粘性）的元素水平居中？

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

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

CSS:

---

提前感谢。

诀窍是将

left

设置为

50%

，然后将其向后拉，使其具有相当于元素宽度一半的负

边距：

.menu{
位置：固定；
宽度：505px；
顶部：0；左侧：50%；
左边距：-252px；/*505/2*/
}

这是小提琴：
诀窍是将
左
设置为
50%
，然后将其向后拉，左

边距等于元素宽度的一半：

.menu{
位置：固定；
宽度：505px；
顶部：0；左侧：50%；
左边距：-252px；/*505/2*/
}

这是小提琴：

.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;
}