javascript - How to position antd notification - i want it to be centered - Stack Overflow

admin管理员组

文章数量:1313187

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

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

• javascript
• css
• reactjs
• antd

Share Improve this question Follow edited Feb 10, 2022 at 8:17 Marko Marchisio asked Feb 9, 2022 at 8:23 Marko MarchisioMarko Marchisio 49733 gold badges1212 silver badges2020 bronze badges 1

• You mean you want to show notification in the [top|bottom]-center or 'center-center'? – Saeed Shamloo Commented Feb 9, 2022 at 8:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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")
);

You can set your notification as

const [api, contextHolder] = notification.useNotification();

and then call it as shown below:

api.info({
      message: `Notification`,
      description: 'bla bla bla',
      placement: 'top',
});

by default it should be centered if you didn't override antd css style.

try it in my CodeSandbox

P.S. You also might be interested in antd message

本文标签： javascriptHow to position antd notificationi want it to be centeredStack Overflow