这篇文章给大家介绍的内容就是关于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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
405
收藏
