前端面試題中經常會出現這個問題，接下來，小郭就帶你揭秘幾種最常見的答案。
關注我！了解更多前端幹貨！
先設定一個html結構以及css的基本樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>如何讓div實現水平居中</title> </head> <body> <div id="dad"> <div id="son"></div> </div> </body> </html>
css樣式
#dad{ width: 400px; height: 200px; border: 3px solid green; margin: 30px auto; } #son{ width: 100px; height: 100px; background: purple; }
方法一：純margin
/*css處添加下面代碼*/ #son{ margin:0 auto; }
方法二：position定位
/*css處添加下面代碼*/ #dad{ position: relative; } #son{ position: absolute; left:50%; margin-left:-50px; } /*注意：margin-left是負值，是#son這個div寬的一半*/ç
方法三：flexbox
/*css處添加下面代碼*/ #dad{ display: flex; justify-content: center; } /*注意：彈性盒子的大部分屬性都是寫在父級上的*/
以上三種是最常見的，下期我們來講講其他奇形怪狀的方法～
關注我，帶你了解更多前端幹貨！
學前端，就選銳盈課堂！
,更多精彩资讯请关注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 
