解决flex布局align-items:center无法垂直居中的问题
766人次看过本文
在作flex布局的时候，有时候你可能会遇到align-items:center无法垂直居中的问题。比如：
#main{
display: flex;
justify-content: center;
align-items: center;
}
#content{
width: 100px;
height: 100px;
background-color: #1890FF;
}
此时align-items:center垂直居中失效，只能水平居中，不能垂直居中。
这是由于main缺乏高度，100%的高度是不起作用的，最好设置height高度为100vh，这样就能够解决这个问题了。
height: 100vh;
这样就能够解决align-items:center无法垂直居中的问题了。
7
本文标签：
转载或复制本文请附带：素材地带
本文URL： https://www.chanbee.com/336.html
本文素材：CHANBEE-336.rar
本站素材解压密码是：chanbee.com
本文URL： https://www.chanbee.com/336.html
本文素材：CHANBEE-336.rar
本站素材解压密码是：chanbee.com
(⚠️注：本站的素材绝大数是以医学、科学和健康这几方面为主，主要适合学医人员用来学习交流，非学医人员建议不要浏览。)
随机推荐
近期文章
