外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足以下两个条件： 1、必须是块级元素 2、盒子必须指定了宽度（width) 然后给左右外边距设置为auto，就可使块级元素水平居中。

(1)通俗写法

margin: 0 auto; /*水平居中对齐*/

(2)高手写法

margin-left: auto; /*左边自动充满*/
margin-right: auto; /*右边自动充满*/

（3）不推荐

margin: auto; /*上下左右auto 但是上下左右不起作用 还是水平居中对齐*/

外边距合并

使用margin定义块袁术的垂直外边距时，可能会出现外边距的合并。

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们的垂直间距不是margin-bottom+margin-top，而是两者中的较大者。这种现象称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

对于两个嵌套关系的块元素，如果父元素没有上边距及边框，则父元素的上边距会与子元素的上边距发生合并，合并后的外边距为两者中的较大者，即时父元素的上边距为0，也会发生合并。

解决方案： 1、可以为父元素定义1像素的上边框或上内边距（注意：添加的边框或内边距要算在盒子的宽度和高度里面）。 2、可以为父元素添加 overflow：hidden;