react antd confirm居中

在React Ant Design库中，如果你想让Confirm弹框（警告确认对话框）居中显示，你可以利用CSS或者第三方库如`react-responsive`来实现。这里提供一种简单的CSS解决方案：

首先，在你的组件样式文件或者全局样式中添加如下样式：

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

这将使所有的Confirm组件无论大小都居中显示。

如果你需要更精确的响应式布局，可以考虑引入`react-responsive`库，并设置最小屏幕尺寸下的居中样式：

import React from 'react';
import { Confirm, Responsive } from 'antd';
import { sm } from 'react-responsive';

function ResponsiveCenteredConfirm(props) {
  const centerProps = { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } };
  return (
    <Responsive breakpoint={sm}>
      {({ xs, md }) => (xs ? <Confirm {...props} /> : <Confirm {...props} {...centerProps} />)}
    </Responsive>
  );
}

// 使用时
<ResponsiveCenteredConfirm message="确认操作吗?" onOk={() => alert('OK!')} onCancel={() => alert('Cancel!')}/>

这里，当屏幕宽度小于设备视口的`sm`（通常指平板电脑）时，确认框会直接显示；大于等于`sm`时，它会被调整为居中显示。