js 设置toastr居中top显示

可以通过以下步骤来设置 `toastr` 居中 top 显示：

1. 在 `toastr` 的初始化选项中，设置 `positionClass` 为 `toast-top-center`，这将把 `toastr` 居中显示在页面的顶部。

toastr.options = {
  "positionClass": "toast-top-center"
}

2. 在 CSS 中设置 `.toast-top-center` 的样式，将其垂直居中。

.toast-top-center {
  top: 50%;
  transform: translateY(-50%);
}

这将把 `toastr` 容器的顶部位置设置为页面的中心，并通过 `transform` 属性将其向上移动一半高度，以使其垂直居中。

注意，如果你在使用 Bootstrap 等 CSS 框架，可能需要覆盖框架默认的 `toastr` 样式。

相关问题

设置元素居中显示

要设置元素居中显示，可以使用以下方法：

1. 对于行内元素，可以使用 text-align 属性将其文本居中显示：

.container {
  text-align: center;
}

2. 对于块级元素，可以使用 margin 属性将其水平居中：

.container {
  margin: 0 auto;
}

3. 对于绝对定位的元素，可以使用 left 和 top 属性将其水平垂直居中：

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

其中，transform 属性用于将元素向左上方移动自身宽度和高度的一半，从而实现居中显示。

js 页面居中置顶显示信息窗口

在JavaScript中，要使页面上的信息窗口居中并始终保持顶部显示，你可以结合CSS和HTML来实现。这里是一个简单的示例：

首先，在HTML中创建一个包含信息内容的`<div>`元素，例如：

<div id="infoWindow" class="center-top">
    <p>这是你要显示的信息</p>
</div>

然后，设置CSS样式来实现居中和固定在顶部：

.center-top {
    position: fixed;
    top: 0; /* 将其放置在顶部 */
    left: 50%; /* 让它水平居中 */
    transform: translateX(-50%); /* 移动到左边50%，抵消left的50%，达到真正的中心 */
    width: 50%; /* 自适应宽度，根据需要调整 */
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

这样，无论浏览器窗口大小如何变化，`#infoWindow`都会始终保持在屏幕的中心位置，并且位于页面的顶部。