今天要做一個彈窗，由於彈窗高度不確定，還要相容ie8，百度了各種方法，沒用。由於父元素是固定定位，採用父元素display:table-cell;vertical-align:middle;text-align:center;子元素行內快，發現沒用，後來發現，父元素固定定位或絕對定位採用這個方法是不行的。

.popup{
    position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: table-cell;
vertical-align: center;
text-align: center;
}
.popup-content
 
{
    display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}

那麼，我給父元素裡面加一層，定位成相對定位怎樣？然後我就發現

<div class="popup">
    <div>
        <div class="popup-content"></div>
    </div>
</div>

.popup>div{
    position: relative;
width: 100%;
height: 100%;
display: table-cell
 
;
vertical-align: center;
text-align: center;
}

然後我發現家的一層長寬百分比無效，又試了下px，可以。那就可以用js來設定他的長寬。（總比設定不固定寬度的popup-content好吧）

function resetPopupWrap() {
   console.log($(".popup>div"));
<!--設定popup內容包裹層的大小-->
$(".popup>div").width($(".popup").width());
$(".popup>div").height($(".popup").height
 
());
};