解决flex布局align-items:center无法垂直居中的问题

389人次看过本文

在作flex布局的时候,有时候你可能会遇到align-items:center无法垂直居中的问题。比如:

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

此时align-items:center垂直居中失效,只能水平居中,不能垂直居中。
chanbee-103927
这是由于main缺乏高度,100%的高度是不起作用的,最好设置height高度为100vh,这样就能够解决这个问题了。

height: 100vh;

这样就能够解决align-items:center无法垂直居中的问题了。
chanbee-102828

素材地带微信公众号
欢迎转载或复制本文请附带上本文超链接
并注明出处: 素材地带
本文固定链接URL: https://www.chanbee.com/336.html
本文下载素材名称:CHANBEE-336.rar
本站素材解压密码是:chanbee.com

上一篇

纯CSS3实现飘动的红灯笼

下一篇

解决Vmware虚拟机USB图标灰色识别不了设备方法

随机推荐

近期文章

相关推荐