使用antd组件完成注册页面并垂直水平居中于页面

好的，这里是一个使用Ant Design组件库搭建的一个垂直水平居中的注册页面的代码示例：

import { Form, Input, Button } from 'antd';
import { Row, Col } from 'antd';
import './index.css';

const RegistrationForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Row justify="center" align="middle" className="registration-form-wrapper">
      <Col span={8}>
        <Form
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default RegistrationForm;

我们在这里使用了`Row`和`Col`组件来创建一个水平和垂直居中的布局。在`Row`组件中，我们使用`justify`和`align`属性来使其水平和垂直居中。在`Col`组件中，我们使用`span`属性来设置其宽度。此外，我们还创建了一个名为`registration-form-wrapper`的CSS类来设置表单的样式，例如设置表单的宽度、背景颜色等等。