## 居中组件

## 代码演示

```tsx
import React from 'react'
import { WrapperCenter } from 'ui-component-5e';

const arr = [
    {
      boxName: 'box1',
      title: 'boxTitle1',
    },
    {
      boxName: 'box2',
      title: 'boxTitle2',
    },
    {
      boxName: 'box3',
      title: 'boxTitle3',
    },
    {
      boxName: 'box3',
      title: 'boxTitle3',
    },
  ]
const children = (
    <>
      <div>居中不居中</div>
      <div style={{display: 'flex', width: '100%'}}>
        {arr.map((item, index) => (
          <div
            key={index}
            style={{
              width: '100%',
              height: '100%',
              padding: '20px',
              marginRight: '10px',
              display: 'flex',
              flexDirection: 'column',
              background: '#6db8ff',
            }}>
            <div>name: {item.boxName}</div>
            <div>title: {item.title}</div>
          </div>
        ))}
      </div>
    </>
  )

export default () => <WrapperCenter>{children}</WrapperCenter>;
```