布局补充与垂直居中

布局补充

圣杯布局

优点：

缺点：

代码：

效果图：

双飞翼布局

优点：

缺点：

代码：

效果图：

---

垂直居中

<style type="text/css">
	.box{
        width: 200px;
        height: 200px;
        border: 2px solid red;
        margin: 100px;
    }
    .div1{
        width: 120px;
        height: 100px;
        background-color: lightseagreen;
    }
</style>
<div class="box">
    <div class="div1">这是小盒子</div>
</div>

在上面的代码上面进行补充，实现垂直居中的效果

1.弹性盒子

优点：

缺点：

2.弹性盒子（二）

优点：

缺点：

3.子绝父相+定位

优点：

缺点：

4.子绝父相+位移

优点：

缺点：

5.table-cell配合vertical-align

优点：

缺点：

6.inline-block配合vertical-align

优点：

缺点：