解决align-items失效,无法居中问题

在做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;
		

这样就可以解决这个问题了
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页