“Antd”库中的组件垂直和水平居中不起作用

Antd 是一个流行的 React UI 库，提供了丰富的组件来帮助开发者快速构建界面。如果你在使用 Antd 的组件时发现垂直和水平居中不起作用，可能是由于以下几个原因：

基础概念

Flexbox 布局：一种现代的 CSS 布局模式，可以轻松实现元素的居中对齐。
Grid 布局：CSS 的另一种布局模式，适用于更复杂的二维布局。

可能的原因

样式覆盖：Antd 组件的默认样式可能被你的自定义样式覆盖了。
容器尺寸：如果容器本身没有设置高度和宽度，子元素可能无法正确居中。
Flexbox 属性：可能没有正确设置 Flexbox 相关的属性。

解决方法

以下是一些常见的解决方法：

使用 Flexbox 布局

确保父容器设置了 display: flex，并使用 justify-content 和 align-items 属性来实现水平和垂直居中。

import React from 'react';
import { Card } from 'antd';

const App = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <Card title="Centered Card">
        This card is centered both horizontally and vertically.
      </Card>
    </div>
  );
};

export default App;

使用 Grid 布局

如果你更喜欢使用 Grid 布局，可以这样设置：

import React from 'react';
import { Card } from 'antd';

const App = () => {
  return (
    <div style={{ display: 'grid', place-items: 'center', height: '100vh' }}>
      <Card title="Centered Card">
        This card is centered both horizontally and vertically.
      </Card>
    </div>
  );
};

export default App;

检查样式覆盖

确保没有其他样式覆盖了 Antd 组件的默认样式。你可以使用浏览器的开发者工具来检查元素的样式。

确保容器有尺寸

如果父容器没有设置高度和宽度，子元素可能无法正确居中。确保父容器有明确的尺寸。

import React from 'react';
import { Card } from 'antd';

const App = () => {
  return (
    <div style={{ height: '100vh', width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <Card title="Centered Card">
        This card is centered both horizontally and vertically.
      </Card>
    </div>
  );
};

export default App;