css中子元素在父元素中水平垂直居中

1、父元素开启相对定位,子元素开启绝对定位,子元素中margin减去自身宽高的一半。



	
		
		
		
	
	
		

css中子元素在父元素中水平垂直居中_第1张图片
2、子元素相对于父元素绝对定位,并且margin值为auto

该方式不受元素宽高所限制,比较好用(推荐使用)



	
		
		
		
	
	
		

css中子元素在父元素中水平垂直居中_第2张图片
3、将元素转换成表格样式:diplay:table-cell,再利用表格的样式来进行居中(推荐)



	
		
		
		
	
	
		

css中子元素在父元素中水平垂直居中_第3张图片
4、父元素开启相对定位,子元素开启绝对定位,在子元素中设置tranform属性



	
		
		
		
	
	
		

css中子元素在父元素中水平垂直居中_第4张图片
5、在父元素中使用css3中的flex属性



	
		
		
		
	
	
		

css中子元素在父元素中水平垂直居中_第5张图片

你可能感兴趣的:(HTML,CSS)