IT技术

弹性盒模型使元素居中
作者:
来源: 本站
发布日期: 2018/6/13 13:47:55
点击量: 314次
【 字体:
背景颜色:
弹性盒模型就是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