弹性盒模型使元素居中
时间:2018/6/13 13:47:55    浏览次数:165 来源:本站作者:管理员
弹性盒模型就是flex,css3新增布局方式,超级好用,谁用谁知道,推荐大家都学习一番。
这个方法我在手机端都很喜欢用,相对爽啊 呵呵。同样比较遗憾的是低版本IE不支持,不过手机端是没有问题的,使用旧版方法display:box;


<style>
*{margin:0px; padding:0px;}
.flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}
.flex-hc {-webkit-box-pack:center; -ms-justify-content:center; -webkit-justify-content:center; justify-content:center;}
.flex-vc {-webkit-box-align:center; -ms-align-items:center; -webkit-align-items:center; align-items:center;}
.wrap {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;}
</style>


<div class="wrap flex flex-hc flex-vc">
<div class="test">
<img src="img/img1.jpg" width="200" >
</div>
</div>


注:文章内容来源于网络。

Contact联系我们
告诉我们您想要的吧!我们为当地客户提供专业、及时的服务。

地址:云南省昆明市白云路368号

电话:400-871-8716     (工作时间:09:00-18:00(周一至周五))

何总:23592693

李总:53815112