message消息提示框居中

你可以使用 CSS 来使 message 消息提示框居中。下面是一个示例：

.ant-message {
  display: flex;
  justify-content: center;
  align-items: center;
}

这会将 `ant-message` 对象设置为 flex 容器，并使用 `justify-content` 和 `align-items` 属性来使其水平和垂直居中。你可以根据需要调整这些属性的值。

注意，这只适用于 Ant Design 的 message 组件。如果你使用其他库或自己实现了消息提示框，可以使用类似的 CSS 代码来将其居中。

相关问题

设置消息提示框居中

您可以使用以下 CSS 样式来使消息提示框居中：

.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

其中，`message-box` 是您的消息提示框的类名或 ID 名称。这个样式将使提示框在页面中居中显示。

这段代码消息提示框出现时不是居中出现位置，消失动画也一样，怎么优化

如果消息提示框的父元素有设置 `text-align: center`，那么可以将 `.message` 的 `left` 属性改为 `50%`，同时将 `transform` 属性去掉：

.message {
  position: fixed;
  top: 0;
  left: 50%;
  width: 50%;
  background-color: #4CAF50;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  animation-name: slideInDown;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  z-index: 9999;
}

如果不想改变 `left` 属性，也可以将 `transform` 属性改为 `translate(-50%, -50%)`，同时将 `.message` 的 `top` 属性改为 `50%`：

.message {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  animation-name: slideInDown;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  z-index: 9999;
}

至于消失动画，可以将 `.message.hide` 的样式中的 `animation-name` 属性改为 `slideOutUp`，并将 `animation-timing-function` 属性改为 `ease-in`，使消失动画更加自然：

.message.hide {
  animation-name: slideOutUp;
  animation-timing-function: ease-in;
}