最全面的垂直居中方法

1.使用padding

最全面的垂直居中

div{
	width:200px;
	padding-top:50px;
	padding-bottom:50px
}

span{
	font-size:50px
}

在padding中，主要涉及到是对盒模型的计算掌握，各个数值
优点：简单，只需设置上下内边距
缺点：父元素不能设置固定高度

2.line-height

最全面的垂直居中

div{
	width:350px;
	heigh:100px;
}
span{
	line-height:100px
}

相信各位都熟悉line-height属性了，无非就是和父元素的height相互比较的值
在这里需要提醒的一点是 如果子元素使用的是p标签，你需要在子元素p的css中添加padding:0px才可以实现相同效果
优点：可设置父元素固定高度
缺点：不太数和多行文字

3.flexbox—弹性盒

最全面的垂直居中方法

div{
	height:210px;
	width:170px;
	display:flex;
	flex-direction:column;
	juntify-content:center;
}

我想对于弹性盒的重要性各位都知道，如果你还不清楚，求你去看看。
优点：简单易懂
缺点：兼容性

4.grid

	

		
主站
		
番剧
		
游戏中心
		
直播
		
会员购
		
漫画
	


ul{
	display:grid;
	grild-template-columns:repeat(6,1fr)
	align-item:center;
	justify-content:center
}

优点：布局很牛
缺点：兼容性
grid还是比较适合多行多列的布局
导航栏本人建议使用flex最适合了

5.absolute

	

		
	


div{
	position:relative
}
i{
	height:50px;
	width:50px;
	position:absolute;
	top:50%;
	transfrom:translateY(-50%)
}

在这里这个方法很好适用，比如你要做一个相对于窗口浏览器垂直居中，这一定是一个好办法