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/

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

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

请注意，它是水平中心，垂直顶部。（不是水平顶部和垂直中心！）

Answer 2

我只在left:50%;添加了.notification-board > .notification，而且效果很好!!

小提琴：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;

  }

看到这个jsfiddle

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

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

3 个答案: