美文网首页
flexbox居中

flexbox居中

作者: 一叶信笺飘云间 | 来源:发表于2017-03-21 16:57 被阅读8次

利用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样式,即可实现子组件在父组件内的居中

相关文章

  • flexbox居中

    利用flexbox实现div居中的css,高版本IE才支持。不过连微软都放弃IE改用edge了,我们为何还要再垂死...

  • flexbox 居中问题

    https://www.cnblogs.com/coco1s/p/4444383.html

  • web前端如何实现CSS竖向居中

    目录 一、使用Flexbox实现CSS竖向居中 一、理解vertical-align或“如何竖向居中” 1、Tab...

  • 【前端攻略】水平垂直居中方案

    参考: 【前端攻略】最全面的水平垂直居中方案与flexbox布局

  • 【移动端】移动web布局

    Flexbox弹性布局 另外有一个常见的问题:不定宽高的水平垂直居中css3的解决方式是: flexbox版: F...

  • 解读 CSS 布局之水平垂直居中

    摘要:flexbox是个很强大的布局模块,三个属性就搞定居中,而且不论父容器还是居中元素都可以不定宽高 水平居中 ...

  • css实现图片居中

    居中的方法也多得很,这里就不多提了,会加上一些链接可以参考居中的方法。 参考链接: Flexbox完美解决CSS垂...

  • Flexbox实现元素的水平居中和垂直居中

    网上有N种方法实现元素的水平居中和垂直居中,如CSS制作水平垂直居中对齐,这些方法各有各的优缺点。在这里,我们使用...

  • Flexbox完美解决CSS垂直居中

    44年前我们就把人类送上月球了,但现在我们仍然无法在CSS中实现垂直居中。 在CSS中对元素进行水平居中是非常简单...

  • 盒子模型(flex弹性布局)

    1、Flexbox布局方式 传统的盒模型:简单,但在处理实现诸如垂直居中、弹性宽度和高度等特性时会极为麻烦。Fle...

网友评论

      本文标题:flexbox居中

      本文链接:https://www.haomeiwen.com/subject/xholnttx.html