flex布局解决align-items失效，无法居中问题

1.flex布局

#main{
	display: flex;
	justify-content: center;
	align-items: center;
	
}
#content{
	width: 100px;
	height: 100px;
	background-color: #1890FF;
}

上面的布局会出现无法垂直居中的问题
这是因为main缺少高度，100%的高度仍然不起作用，最好使用100vh来设置，这样就可以解决这个问题。
在#main样式里加上：height: 100vh;

#main{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;	
}

2.关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。