必备：css中如何让div水平居中(上)

　　前端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。

　　关注我！了解更多前端干货！

　　先设定一个html结构以及css的基本样式。

　　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;

　　}

　　/*注意：弹性盒子的大部分属性都是写在父级上的*/

　　以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～

　　关注我，带你了解更多前端干货！

　　学前端，就选锐盈课堂！