Administrator
发布于 2020-07-24 / 14200 阅读 / 0 评论 / 0 点赞

布局补充与垂直居中

布局补充

圣杯布局

优点

缺点

代码

效果图

双飞翼布局

优点

缺点

代码

效果图


垂直居中

<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


优点

缺点


评论