表格格子完全居中

最近升级了 react-table 这个库对表格，当文本比较多的格子（Cell）就是有问题，
我们尝试用换行的方法，可以解决部分问题，但是显示还是有点不满意。

开始是我们表格格子如下：

import styled from '@emotion/styled';
export const VCenterCell = styled.div`
  height: 30px;
  display: flex;
  align-items: center;
`;

这个格子让文本居中，文字多的情况下就有问题，超出去了，盖住另外一个格子。

利用 overflow: hidden， 把多出来的文本隐藏起来，单长文本，看起来还行，但是多行的，就有文字部分被覆盖。

强制换行呢？

利用 word-break: break-all; 可以强制把文本换行，我们是把文本换行了， 但是文本还是覆盖在一起（上下覆盖）。

把 height: 30px 去掉，文本可以正常显示出来了，但是文字不居中了。

我们只要让格子的高度 100% 就可以了。

最终格子代码如下：

import styled from '@emotion/styled';
export const VCenterCell = styled.div`
  word-break: break-all;
  height: 100%;
  display: flex;
  align-items: center;
`;