CSS頁面配置是web前端開發的最基本的技能，本文將介紹一些常見的布局方法，涉及到盒子布局，column布局，flex布局等內容。本文中，你可以看到一些水平垂直置中的方法，左側固定寬度，右側自適應的一些方法。如果你有更多關於布局方面的技巧，歡迎留言交流。一、神奇的置中 經常看到有一些面試題問如何?水平垂直置中，還要求用多種方法。唉唉唉！下面介紹一下我所知道的實現置中的方法。（1）父元素relative;子項目absolute，top:50%;left:50%;margin-left:-自己寬度的一半;margin-right:-自己高度的一半。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直置中2</title> <style type="text/css"> .container{ width: 100%; height: 500px; background: red; position: relative; } .child{ width: 300px; height: 300px; background: blue; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -150px; } </style></head><body> <div> <div></div> </div></body></html>
這種方法需要知道子項目的寬高。
（2）父元素：relative;子項目：absolute;top：50%;left:50%;transform:translate(-50%,-50%);
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直置中3</title> <style type="text/css"> .container{ background: red; width: 100%; height: 500px; position: relative; } .child{ background: blue; width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style></head><body> <div> <div></div> </div></body></html>
此法跟上面的相似，但是用到了transform，好處是不需要知道子項目的寬高,相容性方面我查了一下，看著辦吧。
（3）父元素：display: flex;justify-content: center;align-items: center;
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直置中1</title> <style type="text/css"> .container{ width: 100%; height: 400px; background: red; display: flex; justify-content: center; align-items: center; } .child{ width: 300px; height: 300px; background: blue; } </style></head><body> <div> <div></div> </div></body></html>
這種方法看起來有些高大上，根本不用理會子項目。
（4）水平置中的方法，父元素：text-align：center
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>水平垂直置中4</title> <style type="text/css"> .container{ background: red; width: 100%; height: 500px; text-align: center; } .child{ background: blue; width: 300px; height: 300px; margin: auto; } </style></head><body> <div> <div></div> </div></body></html>
如果子項目裡的文字不要水平置中的話，那麼用此法將遇到不少麻煩。（5）水平置中方法，子項目：margin：0 auto;這個好說，不上代碼了好了，關於置中問題就說這麼多，如果你還有更好的方法，請告訴我。
二、左側固定寬度，右側自適應這是一個比較常見的需求，下面介紹幾種實現方法。（1）左邊定寬，左浮動，右邊不指定寬。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>做固定，右邊自適應</title> <style type="text/css"> body{ margin: 0; } .aside{ background: red; width:200px; height: 500px; float: left; } .main { background: blue; height: 500px; } </style></head><body> <div> 我是左邊的 </div> <div> 我是主體 我是主體 我是主體 我是主體 我是主體 </div></body></html>
做實驗時無意發現了這種方法，意外之喜。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左側固定右側自適應</title> <style type="text/css"> .container { padding-left: 200px; width: 100%; position: relative; } .left{ position: absolute; left: 0; right: 0; background: red; height: 500px; width: 200px; } .right{ background: blue; width: 100%; height: 500px; } </style></head><body> <div> <div>zuobian</div> <div> 新華社俄羅斯喀山3月23日電（記者 魏良磊）中俄執政黨對話機制第六次會議和第五屆中俄政黨論壇23日在俄羅斯喀山舉行。和俄羅斯聯邦總統蒲亭分别致賀信。 </div> </div></body></html>
注意了，absolute是脫離文檔流的。.right的100%是相對於父容器的內容寬度的，不是整個寬度。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左邊固定，右邊自適應</title> <style type="text/css"> .container{ display: flex; } .left{ width: 200px; height: 500px; background: red; } .right{ background: blue; height: 500px; flex: 1; } </style></head><body> <div> <div>zuobian</div> <div> 新華社俄羅斯喀山3月23日電（記者 魏良磊）中俄執政黨對話機制第六次會議和第五屆中俄政黨論壇23日在俄羅斯喀山舉行。和俄羅斯聯邦總統蒲亭分别致賀信。 </div> </div></body></html>
彈性盒子很強，有木有。但是有的是要加首碼的，哪些要加自己查去，有一次做實驗，電腦樣式正確，手機就是不對，搞了好半天。
（4）父：display：table;左右：display：table-cell;左：定寬。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左邊固定，右邊自適應</title> <style type="text/css"> .container{ display: table; } .left{ width: 200px; height: 500px; background: red; display: table-cell; } .right{ background: blue; height: 500px; display: table-cell; } </style></head><body> <div> <div>zuobian</div> <div> 新華社俄羅斯喀山3月23日電（記者 魏良磊）中俄執政黨對話機制第六次會議和第五屆中俄政黨論壇23日在俄羅斯喀山舉行。羅斯聯邦總統蒲亭分别致賀信。 </div> </div></body></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
