首頁 > 開發者 > JavaScript
淺談position、table-cell、flex-box三種垂直（水平）置中技巧，table-cellflex-box
一、首先是喜聞樂見的position方法，經典且萬能，用法如下：
1 父元素{ 2 position:relative; 3 } 4 子項目{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 margin-top:/*該元素height*0.5的負值*/; 9 margin-left:/*該元素width*0.5的負值*/;10 }
不需要水平置中可以去掉left和margin-left。
劃重點：需要父元素和子項目都定義寬高，自適應是不可能自適應的，這輩子都不可能自適應的。
二、 display:table-cell能夠使大小不固定的元素實現垂直置中布局，先來一發用法:
父元素{ display:table-cell; vertical-align:middle;}子項目{ vertical-align:middle;}
table-cell布局除了常見的實現不同寬高的圖片垂直置中，還能做到自適應兩欄布局（評論區等）：
代碼如下：
HTML部分：
<div class="wrap"> <div class="img"> <img src="http://img5.imgtn.bdimg.com/it/u=416202619,4025660570&fm=26&gp=0.jpg" width="80px" height="80px" alt=""> </div> <div class="text"> <p>文字部分 </p> </div> </div>
CSS部分：
<style type="text/css"> .wrap{ display: table-row; } .img{ display: table-cell; vertical-align: middle; text-align: center; width: 100px; border: 1px solid #000; } .text{ display: table-cell; width: 300px; border: 1px solid #000; padding: 10px; } .wrap div+div{ border-left: none; }</style>
另外table-cell還能自動使多個子項目等寬分布，不需要自己計算寬度：
代碼如下：
ul{ list-style-type:none; display: table; width: 250px; padding: 0; } li{ display: table-cell; text-align: center; } li+li{ border-left: 1px solid #000; }
劃重點：1、IE6/7不支援; 2、table-cell不支援margin屬性（但支援padding）,就很僵硬; 3、盡量不要和浮動/定位同時用，會破壞它的css屬性。
三、如果你用ie我們就做不成朋友之彈性布局神器flex-box，用法如下：
父元素{ display:flex /* 行內元素用inline-flex */ align-items:center;/*當主軸為水平方向(預設)*/ }
原理是使flex-box的子項目（伸縮項目）沿著側軸方向（當預設flex-direction:row時，側軸就是垂直方向）置中對齊。
使用flex-wrap，還可以使伸縮容器裡的內容摺疊顯示：
當調整視口寬度縮小到480px時：
代碼如下：
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} #box{ display: flex; flex-wrap: wrap; justify-content:center;/* 主軸方向置中對齊*/ align-items: center;/* 側軸方向置中對齊*/ padding: 50px; font-size: 2.5em; font-weight: bold; text-align: center; border: 1px solid #000; } </style></head><body> <div id="box"> <p class="item1">超好吃的</p> <p class="item2"></p> <p class="item3">麻辣小龍蝦</p> </div></body>
瀏覽器安全色情況：
低版本瀏覽器安全色性解決：
display: -moz-box; /* 低版本firefox */
display:-webkit-box;/* IOS 6-,safari 3.1-6 */
------
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* 較低版本firefox */
display: flex; /*IE11, Chrome29+, FireFox 20+ */
參考：
相容：
https://zhuanlan.zhihu.com/p/21640023
http://www.cnblogs.com/iriszhang/p/6102524.html
flex-box的相容性bug解決：
http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
