CSS之垂直居中(多种实现方式)

web前端开发技术——html_css_javascript|html css移动前端开发|网站前端开发
1.对于定位肯定其中需要自己根据实际需求再细节上调整,比如父容器:overflow:hidden,position:relative,子容器:min-width、min-height等等。这些就不介绍了;
2.以下测试浏览器为chrome最新版本,兼容性请参考引用地址。
3.选出常用的以及不常用的但是可以用的,未列举的方式不建议使用。
1.绝对定位居中
这一种比较难以理解。
子元素样式如下:
<style>
son{
width:50%;
height:50%;
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
}
</style>
2.变形
这种是借用css3:transform: translate(-50%,-50%);来实现。
<style>
son {
width:50%;
margin:auto;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>###3.margin的负值
这种之前在我前面介绍margin的时候介绍过了。####css margin负值的使用
<style>
son {
width:300px;
height:200px;
padding:20px;
position:absolute;
top:50%;left:50%;
margin-left:-170px;/* (width + padding)/2 */
margin-top:-120px;/* (height + padding)/2 */
}
</style>
4.设表格样式
<style>
farther {
width:100%;
height:300px;
background:salmon;
display:table;
}
#son {
background:skyblue;
width:50%
height: 120px;
display:table-cell;
vertical-align:middle;
}
#grandson{margin: 0 auto;width: 90px;height: 20px; background: saddlebrown}
</style>
<div id=”farther”>
<div id=”son”>
<div id=”grandson”>123</div>
</div>
</div>Tips:如果只有文字。那么可以简单点 。配合text-align:center
<style>
farther {
width:100%;
height:300px;
background:salmon;
display:table;
text-align:center;
}
#son {
background:skyblue;
width:50%
height: 120px;
display:table-cell;
vertical-align:middle;
}
</style>
<div id=”farther”>
<div id=”son”>
123
</div>
</div>###5.行内块
配合父元素的伪元素
#farther {
width: 100%;
height: 300px;
background: darkkhaki;
text-align: center;
}
farther:after {
content: ”;
height: 100%;
display: inline-block;
vertical-align: middle;
}
#son {
width: 150px;
height: 50px;
background: silver;
display: inline-block;
vertical-align: middle;
}
</style>
<div id=”farther”>
<div id=”son”></div>
</div>
6.其他
flexbox方法
css3新增 英文资料
移动的的前端开发|web前端开发百度云教程|前端移动开发的常见问题
» 本文来自:前端开发者 » 《CSS之垂直居中(多种实现方式)》
» 本文链接地址:https://www.rokub.com/3790.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!