实现居中的三种方式（react行内样式写的）

1、 flex

justifyContent: 'center', // 控制水平居中

alignItems: 'center' // 控制垂直居中

<div style={{ background: 'pink', width: '400px', height: '400px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <div style={{ background: 'white', width: '50px', height: '50px' }}>
        1111
    </div>
</div>

2、定位（父元素相对定位，子元素绝对定位）

 <div style={{ background: 'pink', width: '400px', height: '400px', position: 'relative' }}>
   <div style={{ background: 'white', width: '50px', height: '50px', position: 'absolute', top: '50%', left: '50%', marginLeft: '-25px', marginTop: '-25px' }}>
      1111
   </div>
 </div>

3、css3的transform

 <div style={{ background: 'pink', width: '400px', height: '400px', position: 'relative' }}>
   <div style={{ background: 'white', width: '50px', height: '50px', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)'  }}>
      1111
   </div>
 </div>