css里设置div居中（css中如何让div水平居中）
前端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。
关注我！了解更多前端干货！
先设定一个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; } /*注意：弹性盒子的大部分属性都是写在父级上的*/
以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～
关注我，带你了解更多前端干货！
学前端，就选锐盈课堂！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
