這類問題是面試中經常出現的css問題。那麼你會嗎？會的話，你能想出幾種解決方案呢？我這裡大緻列舉六個方法！
分享之前推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享幹貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。
1.彈性盒模型flex布局<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; display: flex; justify-content: center; /*主軸居中對齊*/ align-items: center; /*交叉軸即y方向劇中對齊*/ } .box{ width: 333px; height: 333px; background: blue; }</style></head><body> <div class="wrap"> <div class="box"></div> </div></body>
2.利用僞類來對齊<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; text-align: center; } .wrap:after{ display: inline-block; content: ''; height: 100%; /*width:0;*/ vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; }</style></head><body> <div class="wrap"> <div class="box"></div> </div></body>
3.利用空span，原理與上面的類似<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; text-align: center; } span{ display: inline-block; height: 100%; vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; }</style></head><body> <div class="wrap"> <div class="box"></div><span></span> </div></body>
4.利用表格的特性：單元表格的内容默認垂直居中<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; text-align: center; border-collapse: collapse; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; /*margin: 0 auto;*/ /*或者*/ }</style></head><body> <table class="wrap"> <td><div class="box"></div></td> </table></body>
5.将塊标簽轉換成表格屬性，display:table-cell<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; display: table-cell; text-align: center; vertical-align: middle; } .box{ width: 333px; height: 333px; background: blue; display: inline-block; vertical-align: middle; }</style></head><body> <div class="wrap"> <div class="box"></div> </div></body>
6.利用相對定位和transform<style type="text/css"> .wrap{ width:500px; height: 500px; background: red; /*display: table-cell;*/ /*text-align: center;*/ } .box{ width: 333px; height: 333px; background: blue; position: relative;//不脫離文檔流，left,top移動父級的百分之五十 left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%)//即使未知元素自身寬高，自動計算後x,y軸移動元素自身寬高的負百分之五十 }</style></head><body> <div class="wrap"> <div class="box"></div> </div></body>
總結：span和僞類對齊方法主要是利用了空内容将基線定在了父級元素的中間位置，然後用inline-block結合vertical-align:middle. table的2種方法則是利用了表格的自帶屬性，彈性盒模型的話就不用多說了，強大的愛不釋手，
最後還是要推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享幹貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。
transform和相對定位結合處理的話，因為要依據父級寬高所以用相對定位，用絕對定位的話會一層層找到頂級，transform再根據自身寬高負方向移動半個寬高。
web前端學習方法經驗可以關注我的‘學習web前端’，每天更新案例源碼或經驗分享，關注後回複‘給我資料’可以領取一套完整的學習視頻,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
