How to align center text or div item with Ant Design Space in Reactjs?

Question

How to align text or div item center horizontal with Space with Ant design ?
Here is my code:

import { Space } from 'antd'

<Space direction="horizontal" align="center" style={{width: '100%'}}>
  <span>Hello</span>
</Space>

Answer 1

Because Antd uses flex for Space div, you need to use justifyContent. Try this

<Space direction="horizontal" style={{width: '100%', justifyContent: 'center'}}>

Answer 2

use direction="vertical" with align="center"

import { Space } from 'antd'

<Space direction="vertical" align="center">
  <span>Hello</span>
</Space>