首页  >  文章  >  web前端  >  css中display:flex属性实现元素垂直居中的代码

css中display:flex属性实现元素垂直居中的代码

不言
不言原创
2018-08-06 17:00:562950浏览

这篇文章给大家介绍的内容就是关于css中display:flex属性实现元素垂直居中的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在此之前元素垂直居中我使用的是绝对定位absolute或固定定位fixed

如何用flex实现元素垂直居中呢,父级包括子级

<div  class=&#39;itemBox&#39;>
    <div>boxboxboxboxboxboxboxboxboxboxbox</div>
</div>
 
.itemBox{
display: flex;
justify-content: center;
align-items: center;
background: #588cfe;
width: 100%;
height: 100vh;
}
.itemBox p{
background: #ffffff;
width: 200px;
height: 200px;
word-break: break-all;//英文超出盒子不换行问题
}

相关文章推荐:

CSS中text-transform属性实现字符串转换的代码

CSS中table表格的两种使用方法(实例)

以上是css中display:flex属性实现元素垂直居中的代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn