在做flex布局的时候,有时候你可能会遇到align-items失效的问题,那么下面来说一下
css
#main{
display: flex;
justify-content: center;
align-items: center;
}
#content{
width: 100px;
height: 100px;
background-color: #1890FF;
}
此时align-items失效,只能水平居中,而并不能垂直居中
这是因为main缺少高度,100%的高度是不起作用的,最好使用100vh来设置,这样就可以解决这个问题了
height: 100vh;
这样就可以解决这个问题了