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

Question

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

尝试使用 position:fixed 但这是我能得到的最好的。

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/

Answer 2

您应该将 left 设置为 50%，然后添加 transform 属性：

.menu {
  position:fixed;
  width: 505px;
  left: 50%;
  transform: translateX(-50%);
}