垂直中心和水平顶部对齐位置固定元件

Question

我是一个jQuery通知系统为我正在建设的网站，我需要通知横幅是顶部对齐水平和垂直中心的网页。

我想出了最上面的位置，但我找不到垂直中心。

我试过margin:0 auto;，left:50%;，left:50%;和right:50%;，但是这些都没有用。

唯一起作用的似乎是像left:40%;这样的中心，但它只能在一个视口/分辨率上工作，而我需要一些响应。

如何将通知垂直中心？

您可以通过单击任意位置来触发jsfiddle中的通知，此处为：http://jsfiddle.net/f85eZ/。

Answer 1

只需将.notification-board的宽度更改为百分比。因为.notification-board是父容器。例如：

.notification-board{
    width:50%;
    ...
}

然后创建一个新的类，以左半为中心对齐：

.notification-board.center{
    left: 25%;
}

请参阅您更新的小提琴：http://jsfiddle.net/f85eZ/2/

是的，我更改了单击处理程序来初始化创建，如下所示：

$('*').on('click', function() {
    $.createNotification({
        horizontal:'center',
        vertical:'top',
        ...

注意，它是水平中心和垂直顶部。(不是水平顶部和垂直中心！)

Answer 2

我只将left:50%;添加到您的.notification-board > .notification中，它运行得很好！

Fiddle：http://jsfiddle.net/logintomyk/5N9E3/

Answer 3

尝试这个css这个工作在所有的视口/分辨率，你需要在中心点。

  .notification-board{
    width:auto;
    font-family:'a', 'iconFont', 'Roboto Slab', 'Myriad Pro', 'Open Sans', sans-serif;
    position:fixed;
    z-index:9999;
    margin:auto;
    display:table;
  }

  .notification-board > .notification{
     background:#000000;
     background:rgb(0, 0, 0);
     background:rgba(0, 0, 0, 0.65);
     border-radius:6px;
     color:#ffffff;
     color:rgb(255, 255, 255);
     padding:16px;
     position:relative;
     display:inline-block;
     width:auto;
     margin:auto;

  }

你看这弹琴

http://jsfiddle.net/f85eZ/8/