Ant Design 表格：如何实现内容多行居中显示

要实现 Ant Design 表格内容展示多行时居中，可以使用 Ant Design 的 Table 组件的 columns 属性中的 render 方法来自定义渲染单元格的内容。在 render 方法中，可以使用 CSS 样式来设置单元格的文本居中。\n\n下面是一个示例代码：\n\njsx\nimport { Table } from 'antd';\n\nconst dataSource = [\n {\n id: 1,\n name: 'John Doe',\n age: 25,\n address: '123 Main St',\n },\n {\n id: 2,\n name: 'Jane Smith',\n age: 30,\n address: '456 Elm St',\n },\n];\n\nconst columns = [\n {\n title: 'ID',\n dataIndex: 'id',\n key: 'id',\n },\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n render: (text) => <div style={{ textAlign: 'center' }}>{text}</div>,\n },\n];\n\nconst App = () => {\n return <Table dataSource={dataSource} columns={columns} />;\n};\n\nexport default App;\n\n\n在上面的示例代码中，我们定义了一个 dataSource 数组来存储表格的数据。然后，我们定义了一个 columns 数组来配置表格的列。在每一列的 render 方法中，我们使用 div 元素来包裹文本，并设置样式 textAlign 为 'center' 来实现文本的居中显示。\n\n最后，我们将 dataSource 和 columns 作为 Table 组件的属性传递，就可以实现表格内容展示多行时的居中效果。