css3如何让盒子水平居中

//第一种 使用边框，但是margin使用会影响其他盒子，不太推荐使用

#father{
width:400px;
height:200px;
border:3px solid pink;
margin:30px auto;/*让父元素相对body居中*/
}
#son{
width:100px;
height:100px;
border:2px solid red;
margin:0 auto;/*让子元素相对于father居中*/
}

//第二种方法 使用定位，子绝父相，再left:50%,margin-left:负担盒子宽度的一半，这是最常用的方法

#father{
width:400px;
height:200px;
border:3px solid pink;
margin:0 auto;
position:relative;
}
#son{
width:100px;
height:100px;
border:2px solid red;
position:absolute;
left:50%;
margin-left:-50px;
}

//第三种flex，弹性布局，让子盒子居中，但是样式要写在父盒子中
#father{
width:400px;
height:200px;
border:3px solid pink;
margin:0 auto;
display:flex;
justify-content:center;
}
#son{
width:100px;
height100px;
border:2px solid red;
}
//在position的基础上，只保留子绝父相，然后在滋贺子中加上margin:auto,left:0,right:0;
#father{
width:400px;
height:200px;
border:3px solid pink;
margin:0 auto;
position:relative;
}
#son{
width:100px;
height:100px;
border:2px solid red;
position:absolute;
margin:auto;
left:0;
right:0;
}

效果图：