是實現的水平居中，但是我想呈現全屏居中時，在父級元素上把width1000px，改成100%，寬度就完全失效了
#parent{
width: 100%;
height: 600px;
background: #B9B9B9;
display: table-cell;
vertical-align: middle;?
}
#child{
width: 200px;
height: 200px;
background: #80F4E7;
display: block;
margin: 0 auto;
}
2020-12-02
你自己再加個parent-fix容器，設置該容器“display: table; width: 100%”。因為你目前的表寬是根據單元格內容大概200px和width設置值100%算出來的。
如果不顯式設置table寬度，根據單元格的內容和單元格的width設置去算總列寬，總列寬會作為表寬。
如果顯示式設置了table寬度，跟上面一樣要算出總列寬。如果表寬大于總列寬，會把多余的分配給列；如果表寬小于總列寬，表寬會被忽略，總列寬會作為表寬。
這兩條規則其實不太嚴謹，中間過程會更復雜，具體去查相關資料吧~
2020-01-16
如果你把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元素計算了。
2020-01-11
不知道