您的位置：首页 > 运维架构 > 网站架构

页面架构（笔记2）——垂直居中布局

2016-02-18 21:49 585 查看
需求要求：

1.子容器相对父容器垂直居中

2，子容器与父容器的自身高度都是自适应的





解决方案一（table-cell+vertical-align）

<style type="text/css">
body{margin:20px;}
.parent{width:4em;height:500px;}
.child{width:100%;}

.parent{
display: table-cell;
vertical-align: middle;
}
</style>

<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>


要点:

vertical-align属性可以作用在inline元素，inline-block元素以及table-ceil上

方案一优点：兼容性好，兼容Ie8+（包括ie8）

缺点：.Ie6.7不兼容table-ceil,可以通过改成table结构的方法来兼容


解决方案二（absolute+transform）

<style type="text/css">
body{margin:20px;}
.parent{width:4em;height:500px;}
.child{width:100%;}

.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>

<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>


方案二优点：absolute脱离文档流，不会对其他元素产生影响，

缺点：transform:不支持Ie6,7，8，兼容性达不到要求，可以在不同的浏览器前加上私有前缀


解决方案三（flex+align-items）

<style type="text/css">
body{margin:20px;}
.parent{width:4em;height:500px;}
.child{width:100%;}

.parent{
display: flex;
align-items: center;
}
</style>

<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>


方案一优点：只要给parent设置就可以了

缺点：flex不支持Ie6,7，8，兼容性达不到要求
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航