溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“利用display:table-cell實現div垂直居中”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“利用display:table-cell實現div垂直居中”吧！
ie7和ie6都不能識別 display: table-cell;（但是支持display: block等css1的屬性！）
ie8以及以后版本可以識別！
ie7和ie6能識別vertical-align:middle;
如果盒模型中間只有幾段文字的話，設置line-height就可以實現居中顯示了！
如果要實現盒模型中的div居中，可以參考以下代碼：
CSS Code復制內容到剪貼板
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
height: 400px;
*position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
}
div#content {
*position: relative;
*top: -50%;
}
效果： 
感謝各位的閱讀，以上就是“利用display:table-cell實現div垂直居中”的內容了，經過本文的學習后，相信大家對利用display:table-cell實現div垂直居中這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
