flexbox居中

利用flexbox实现div居中的css,高版本IE才支持。不过连微软都放弃IE改用edge了,我们为何还要再垂死挣扎在IE上,不能再纵容老顽固们用IE了。作为一个前端开发我们要为淘汰IE贡献一份自己的力量。
<pre>
.block-center{
display: -webkit-box;
display: -ms-flexbox;
display: -moz-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</pre>
在父组件中加入该css样式,即可实现子组件在父组件内的居中

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,263评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,413评论 0 8
  • 前段时间手工纪录了一些flexbox的要点~如图~ 所以想把它整理成电子版,加上更详尽的解析和说明,便于大家和自己...
    赵萱_dily阅读 1,707评论 0 9
  • 尊敬的家长: 您好! 校园安全,师生平安,是大家的共同期盼。为此,学校根据上级教育部门的要求,根据...
    逸枫_love侠阅读 431评论 0 0
  • 高校该如何面对形形色色的排行榜 文/张剑 英国《泰晤士报高等教育专刊》4日晚公布2016年世界大学声誉排行榜,中国...
    剑言闲谈阅读 344评论 0 0

友情链接更多精彩内容