这篇文章给大家介绍的内容就是关于css中display:flex属性实现元素垂直居中的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在此之前元素垂直居中我使用的是绝对定位absolute或固定定位fixed
如何用flex实现元素垂直居中呢,父级包括子级
<div class='itemBox'> <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中display:flex属性实现元素垂直居中的代码的详细内容。更多信息请关注PHP中文网其他相关文章!