你自己再加个parent-fix容器，设置该容器“display: table; width: 100%”。因为你目前的表宽是根据单元格内容大概200px和width设置值100%算出来的。

如果不显式设置table宽度，根据单元格的内容和单元格的width设置去算总列宽，总列宽会作为表宽。

如果显示式设置了table宽度，跟上面一样要算出总列宽。如果表宽大于总列宽，会把多余的分配给列；如果表宽小于总列宽，表宽会被忽略，总列宽会作为表宽。

这两条规则其实不太严谨，中间过程会更复杂，具体去查相关资料吧~

如果你把width：100%这个数值缩小就会发现，这个百分比数值缩的越小，宽度越大；你设为100%，它反而没有宽度只能靠子元素撑开。

具体原因我不清楚，不过https://www.w3school.com.cn/tags/tag_td.asp中有以下两条说明：

在 HTML 4.01 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。

所以没事就不要去用table-cell了。

不用table-cell想实现子div在父div中垂直居中的话，有一种方法可参考：

  .father {
            width: 400px;
            height: 400px;
            position: relative;
            background-color: gray;
            resize: both;
            overflow: hidden;
        }

        .son {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: lightblue;
            width: 200px;
            height: 200px;
            margin: auto;
        }

原理：绝对定位元素，当top/bottom，left/right属性同时出现时，会产生拉伸效果。而margin：auto属性有这样的特性：1、如果对立的属性同时出现，比如margin-left和margin-right，其中一个是auto，那么这个auto会等于父元素的宽度-另一个auto-自身宽度；如果两个都是auto，那么就平分父元素宽度-自身宽度，也就是居中。2、这个特性只有在子元素即使不设置width或height属性，也能占满父元素width或height的情况下生效。div默认display:block，在不设置宽度的情况下可以填满父元素的宽度，因此水平方向的auto是可以生效的。但是情况下垂直方向不会填满，所以垂直方向的auto无效。

我给的示例中，子元素是通过top、right、bottom、left属性来拉伸，这样如果不设置宽高，那就等同父元素的宽高，水平和垂直方向都满足了自动拉满的特性。此时给它设置width,height,margin，就可以实现子元素在父元素中的水平垂直居中。

注：绝对定位元素的定位属性是根据它第一个带有定位属性的祖先元素来计算的，因此要给他的父元素加上一个position:relative，否则定位属性top、left等就会根据body元素计算了。

不知道