How to position antd notification - i want it to be centered

Question

Im using this

export function notificationWithIcon(type, title, description, placement) {
  notification[type]({
    message: title,
    description: description,
    placement
  });
}

However, the only options are topRight, bottomRight, bottomLeft or topLeft

I would like it to appear in the center of my screen. Is there any way to achieve that

EDIT: I used Majid's idea and this is how it looks like now. It's still positioned a bit to the right

Answer 1

Based on documentations:

A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.

But you can customize it yourself with css classes:

.ant-notification-center {
  left: 50%;
  bottom: 50% !important;
  margin-right: 30%;
  transform: translate(-50%, -50%);
}

and use the notification same as following sample:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, notification, Space } from "antd";
import { RadiusUpleftOutlined } from "@ant-design/icons";

const openNotification = (placement) => {
  notification.info({
    message: `Notification ${placement}`,
    duration: 10000,
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
    placement
  });
};

ReactDOM.render(
  <div>
    <Space>
      <Button type="primary" onClick={() => openNotification("center")}>
        <RadiusUpleftOutlined />
        center
      </Button>
    </Space>
  </div>,
  document.getElementById("container")
);