关于解决table标签内单元格出现边框重叠问题

在写一个表格的时候，经常出现一个单元格内可能会需要图片和文本水平垂直居中对齐。而比较方便的设置就是直接display:flex走起。但这样一来会导致单元格出现边距重叠问题。如图所示

代码如下:
`table{ border: 1px solid red; border-collapse: collapse; width: 500px;height: 500px; }

.fl{
display: flex;justify-content: center;align-items: center; }/这是第一个单元格/
`

解决方案：
删除table标签的border-collapse: collapse;如果必须要用到这个效果，则改在table标签上用