盒子margin触发BFC的解决办法&CSS水平居中垂直居中的方式

相邻垂直块元素设置margin时会遇到合并的问题：
这个有点儿像大哥和小弟的关系，谁手段高，谁是大哥，也就听谁的；
如图：（原始图）：让上盒子和下盒子挨着；

此时给粉盒子不想和下面的绿盒子挨着，于是设置一个向下个外边距为50pxmargin-bottom: 50px;;当绿盒子知道以后，也不想挨着粉盒子了，于是他设置了一个向上的外边距为100pxmargin-top: 100px;；那么此时他们之间的距离是150px么？
如图：

为什么不是150px呢？因为盒子在垂直方向设置margin会造成边距合并，谁大按谁的算；那么你要问了，就想让他设置成150怎么办呢？简单：把两个盒子的外边距参数加起来，放到任意一个盒子身上设置:上盒子：margin-bottom:150px; or 下盒子：margin-top:150px;

盒子嵌套时设置margin触发的BFC，父盒子塌陷：
盒子嵌套时，想让子盒子在父盒子里面通过margin来设置垂直方向的位置，不能行得通：

 	// 结构：
 	<div class="father">
        <div class="son">我是儿子</div>
    </div>
    
   // 样式：
	.father {
            width: 300px;
            height: 400px;
        	}
        
   	.son {
            width: 50px;
            height: 50px;
            background-color: pink;
    	    }    

如果给.son一个margin-top:50px;,理论上来讲子盒子应该距离父盒子会有一个想下的50px,但是实际上是没有的，并且会造成父盒子向下塌陷50px.

解决方法：
给父元素设置任意一个以下代码就可以成功解决这个问题：

1. 给父元素添加一个向上的边框：border-top:xxx;
2. 给父元素添加一个内边距；
3. 给父元素添加一个属性overflow:hidden; 溢出隐藏；

---

盒子居中问题：
盒子块级元素居中：margin：0 auto；

文本居中的方式：

	// 文本垂直居中的方式是：让文本的行高等于文本设置的高度；
	height: 54px;    
    text-align: center; // 文本水平居中的方式；
    line-height: 54px;