根據HTML+CSS完成一個三列布局，左右側欄寬為180px，高為300px；中間欄自適應，高為300px；中間欄子元素(寬高不確定)實現水平、垂直居中。
阿新 • • 發佈：2019-01-31
使用Flex佈局，更加方便。HTML程式碼省略，以下只是CSS樣式的程式碼，僅供參考。
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> body{ margin: 0 auto; } #main{ display: flex; flex-direction: row; } #left{ width: 180px; height: 300px; border: 1px solid red; } #right{ width: 180px; height: 300px; border: 1px solid blue; } #middle{ height: 300px; width: 100%; border: 1px solid black; display: flex; align-items: center; justify-content: center; } </style> <body> <div id="main"> <div id="left"></div> <div id="middle"></div> <div id="right"></div> </div> </body> </html>