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

我正在为我正在构建的网站设计一个jQuery通知系统，我需要通知横幅在页面上水平和垂直居中对齐

我算出了顶部的对齐方式，但无法得到垂直中心

我试过

margin:0auto，
左：50%，
左：50%和<代码>右侧：50%，但这些都不起作用

唯一有效的方法是估算中心，如
左：40%，但这只适用于一个视口/分辨率，我需要一些响应性强的东西

如何使通知垂直居中

您可以在jsfiddle中点击任意位置触发通知。
只需将
通知板的宽度更改为百分比。因为
.notification board
是您的父容器。例如：

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

然后创建一个新的类，以将左侧计算为一半进行居中：

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

查看您的最新小提琴：

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

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

请注意，它水平居中，垂直居上。（不是水平向上和垂直居中！）
我只添加了
左侧：50%到你的
.notification board>.notification
上，它工作正常

摆弄：
在所有视口/分辨率上尝试此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;

  }

看到这个了吗

但我不希望通知占据视口的50%宽度，我只希望它占据通知消息的空间。您已经将宽度设置为250px，这意味着您有一个固定的宽度，而不是根据消息长度？我说的对吗？是的，那是因为，这个网站上的信息只有一条，而且可以是固定宽度。所以如果你能让它以固定的宽度工作，那很好。然后将宽度固定在50%就可以了。看到我贴的小提琴了吗。您可以将宽度更改为适合您的任何百分比，只需将
.notification board.center
类中
left
的宽度减半即可。此外，即使消息长度有弹性，如果消息长度超过页面宽度，会发生什么情况？它必须包起来。因此，最好有一个固定的宽度，并让消息无论如何包装。这样，您的左、中、右选项都能很好地工作。它在大多数地方都能正常工作，但在小视口中不行。你建议我在那里做什么？@ Maya:当“代码> CtutoNo饰< /代码>用右上角的选项初始化时，它会起作用吗？@ GangangMango：如果响应性是你关心的，<代码>媒体查询< /代码>是你应该考虑的事情！）abhitalks：它应该…不是吗？是的，但这会给通知整个视口的宽度。我需要的三个要求是，它是以顶部为中心的，它只扩展通知内容的宽度，而不是更多，“并且在所有视口中都能工作。@gomangomango现在可以看到代码和JSFIDLE i更新了，现在它位于顶部居中位置，并且在通知内容完成所有要求时自动宽度。@jigneshkheni:当
createnotification
的选项更改为左上或右上时，这不起作用。@abhitalks我检查它是否工作正常。”和我一起。你能为我提供一个例子吗？@jigneshkheni:请看这个提琴：向下滚动javascript，然后看看
createnotification
在哪里被调用，其中
水平：'right'
和
垂直：'top'
选项。它仍然将通知显示为居中，而不是右对齐。