css设置垂直居中的方法

(1)父元素设置display:table;子元素设置display:table-cell;vertical-align:middle;缺点:ie8以下不支持。




	


	
Content goes here

(2)元素的宽高一定,设置为绝对定位,top:50%;margin-top等于负的元素高度的一半.




	


	

(3)元素的宽高一定,设置为绝对定位,top:0;bottom:0;margin:auto;




	


	

(4)只能将等行文本垂直居中,设置height和line-height相等就好。

(5)flex布局实现垂直居中




	


	
center

(6)给content前面加一个同级元素,并且设置height:50%;margin-bottom等于负的contentHeight的一半,float:left;content清除浮动,content就可以垂直居中显示。




	


	

 

你可能感兴趣的:(web前端,css,垂直居中)