#水平垂直居中

#通过绝对定位

<div
  style={{
    width: 200,
    height: 200,
    backgroundColor: 'gray',
    position: 'relative',
  }}
>
  <div
    style={{
      width: 100,
      height: 100,
      backgroundColor: 'black',
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%,-50%)',
    }}
  ></div>
</div>

#通过 flex

<div
  style={{
    width: 200,
    height: 200,
    backgroundColor: 'gray',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }}
>
  <div
    style={{
      width: 100,
      height: 100,
      backgroundColor: 'black',
    }}
  ></div>
</div>