水平中心位置固定元件

Question

我有一个我在jquery中构建的通知系统，我正在尝试将通知的容器div水平居中。

我尝试了left:50%;，margin:0 auto;和`left：50％;并且正确：50％;'没有一个工作。

因此，我使用类似left:40%;的内容来估算中心，但这只适用于一小部分视口中的一个，我需要在尽可能多的视口中使用它。

所以我决定使用媒体查询根据视口宽度给出不同的left值。 但是，在测试时，我注意到即使在小视口中，媒体查询也无法正常工作，并且它在最大的断点上采用了样式。

为什么？如何正确地水平居中通知是尽可能多的视口。

这是一个带有样式的JS小提琴和触发通知的代码，只需点击任意位置即可触发通知：http://jsfiddle.net/Q6TUr/

以下是我试图让这一切工作的页面，点击灰色背景中的任意位置即可触发通知：http://goo.gl/Dalkqh

如果有人能帮助我如何正确地弄清楚如何在所有视口中水平地居中通知，我将不胜感激。

Answer 1

element.style.marginLeft = -element.offsetWidth/2+'px';

更灵活的方法。

无法根据您的JS小提琴显示结果。你没有提供原始剧本...抱歉，我看不懂。

Answer 2

这是我建议你使用的一个技巧：依赖CSS 2D变换。它是supported in around 81% of web users，所以值得尝试。

这个技巧是什么呢，它仍然在页面宽度上设置了50％的通知消息（当然，视觉上是关闭的）。然后，我们通过将元素转换为自己计算宽度的50％来将元素推回到真正的中心。

.notification-board.center{
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

http://jsfiddle.net/Q6TUr/1/

Answer 3

您可以将它放在包装器中，然后将包装器居中，或者您可以使用宽度将其居中：

打包机：

HTML：

<div class='wrapper'>
    <div class='fixed'>Hello</div>
</div>

CSS：

.wrapper {
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
.fixed {
    position: fixed;
}

或

HTML：

<div class='wrapper'>
    <div class='fixed'>Hello</div>
</div>

CSS：

.fixed {
    width: 500px;
    position: fixed;
    left: 50%;
    margin-left: -250px;
}

Answer 4

如果您想使用top，left，right，bottom属性，则需要将元素位置设置为relative或absolute。

我认为在你的情况下你可能想要使用绝对值。 您可能还需要设置z-index。