如何将子盒子垂直居中于父盒子？新手可能会想到使用margin，

但是子盒子设置margin-top后，会作用于父盒子，如图1

.father{ width: 300px; height: 300px; background-color: pink; }

.son{ width: 200px; height: 200px; background-color: orange; margin-top:10px}

图1 

造成这个现象的原因是：

1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加。

2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决办法如下？

方法一：为父元素设置border

方法二：为父元素添加overflow：hidden；样式

方法三：为父元素或者子元素声明浮动

方法四：为父元素或者子元素声明绝对定位