首页 > 代码库 > css居中常见写法
css居中常见写法
1、最常见的水平居中写法
1 .box-center{ 2 width: 100%;
4 background-color: darkgrey; 5 height: 100px; 6 } 7 .box-child{ 8 width: 30%; 9 height: 50px;10 background-color: #00a5e0;11 margin: auto;12 }13 <div class="box-center">14 <div class="box-child"></div>15 </div>
2、利用css3的新特性，做水平居中
.box-center1 { width: 100%; background-color: darkgrey; height: 100px; /* Firefox */ display: -moz-box; -moz-box-pack: center; /* Safari, Chrome, and Opera */ display: -webkit-box; -webkit-box-pack: center; /* w3c*/ display: box; box-pack: center; } .box-child1 { width: 30%; height: 50px; background-color: #00a5e0; }<div class="box-center1"> <div class="box-child1"> </div></div>
3、垂直居中
<style> .box-center2 { line-height: 200px; width: 100%; height: 200px; background-color: darkgrey } .box-child2 { display: inline-block; line-height: 20px; padding: 20px; background-color: #cd0000; color: #fff; vertical-align: middle; width: -webkit-fill-available; width: -moz-fill-available; width: -moz-available; /* FireFox目前这个生效 */ width: fill-available; }</style><div class="box-center2"> <div class="box-child2"> </div></div>
4、利用css3新特性，垂直居中
<style> .box-center3 { line-height: 200px; width: 100%; height: 200px; background-color: darkgrey; /* Firefox */ display: -moz-box; -moz-box-align: center; /* Safari, Chrome, and Opera */ display: -webkit-box; -webkit-box-align: center; /*w3c */ display: box; box-align: center; } .box-clild3{ background-color: #cd0000; color: #fff; width: 100%; height: 50px; }</style><div class="box-center3"> <div class="box-clild3"></div></div>
5、水平垂直居中:可以利用2和4综合得出绝对居中效果，1和3综合需要在外层div加上text-align:center
css居中常见写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。