css 實現div在頁面上的水平居中問題
阿新 • • 發佈：2018-11-12
css實現一個元素的水平垂直居中與頁面中，是搭建頁面及樣式經常遇到的問題，下面呢，kk把在專案的實踐中經常用到的幾種方法總結了一下，和大家一起分享~~~（歡迎大家批評指正哦）
先來個效果圖
方法一：（直接上程式碼）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基礎測試</title> <style> body{ margin:0; padding:0; } .parent{ width:80%; margin:0 10%; border:5px solid; text-align:center;/*使子元素的內容居中顯示*/ } .son{ width:200px; height:200px; border:2px solid red; margin: 0 auto;/*使此元素水平居中*/} </style> </head> <body> <div class="parent"> <div class="son">我是子元素</div> </div> <script> </script> </body> </html>
注：重點，son的左右margin值為auto，其他的樣式按照需求除錯即可。
方法二：（直接程式碼）
<!DOCTYPE html> <html lang="en"> <利用定位結合margin實現head> <meta charset="UTF-8"> <title>js基礎測試</title> <style> body{ margin:0; padding:0; } .main{ width: 200px; height: 200px; border: 3px solid red; position: absolute; left: 0; right: 0; margin: 0 auto; } </style> </head> <body> <div class="main"> </div> <script> </script> </body> </html>