你自己再加個(gè)parent-fix容器，設(shè)置該容器“display: table; width: 100%”。因?yàn)槟隳壳暗谋韺捠歉鶕?jù)單元格內(nèi)容大概200px和width設(shè)置值100%算出來(lái)的。

如果不顯式設(shè)置table寬度，根據(jù)單元格的內(nèi)容和單元格的width設(shè)置去算總列寬，總列寬會(huì)作為表寬。

如果顯示式設(shè)置了table寬度，跟上面一樣要算出總列寬。如果表寬大于總列寬，會(huì)把多余的分配給列；如果表寬小于總列寬，表寬會(huì)被忽略，總列寬會(huì)作為表寬。

這兩條規(guī)則其實(shí)不太嚴(yán)謹(jǐn)，中間過(guò)程會(huì)更復(fù)雜，具體去查相關(guān)資料吧~

如果你把width：100%這個(gè)數(shù)值縮小就會(huì)發(fā)現(xiàn)，這個(gè)百分比數(shù)值縮的越小，寬度越大；你設(shè)為100%，它反而沒(méi)有寬度只能靠子元素?fù)伍_(kāi)。

具體原因我不清楚，不過(guò)https://www.w3school.com.cn/tags/tag_td.asp中有以下兩條說(shuō)明：

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

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

所以沒(méi)事就不要去用table-cell了。

不用table-cell想實(shí)現(xiàn)子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;
??????? }

原理：絕對(duì)定位元素，當(dāng)top/bottom，left/right屬性同時(shí)出現(xiàn)時(shí)，會(huì)產(chǎn)生拉伸效果。而margin：auto屬性有這樣的特性：1、如果對(duì)立的屬性同時(shí)出現(xiàn)，比如margin-left和margin-right，其中一個(gè)是auto，那么這個(gè)auto會(huì)等于父元素的寬度-另一個(gè)auto-自身寬度；如果兩個(gè)都是auto，那么就平分父元素寬度-自身寬度，也就是居中。2、這個(gè)特性只有在子元素即使不設(shè)置width或height屬性，也能占滿父元素width或height的情況下生效。div默認(rèn)display:block，在不設(shè)置寬度的情況下可以填滿父元素的寬度，因此水平方向的auto是可以生效的。但是情況下垂直方向不會(huì)填滿，所以垂直方向的auto無(wú)效。

我給的示例中，子元素是通過(guò)top、right、bottom、left屬性來(lái)拉伸，這樣如果不設(shè)置寬高，那就等同父元素的寬高，水平和垂直方向都滿足了自動(dòng)拉滿的特性。此時(shí)給它設(shè)置width,height,margin，就可以實(shí)現(xiàn)子元素在父元素中的水平垂直居中。

注：絕對(duì)定位元素的定位屬性是根據(jù)它第一個(gè)帶有定位屬性的祖先元素來(lái)計(jì)算的，因此要給他的父元素加上一個(gè)position:relative，否則定位屬性top、left等就會(huì)根據(jù)body元素計(jì)算了。

不知道