CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中)

示例:

	
		
		
		
	
	

				

				    
Hello world
				
		
	

效果:

2.利用绝对定位+margin(.child宽高固定)

示例:

	
		
		
		
	
	

				

				    
Hello world
				
		
	

效果:

3.利用定位与margin:auto

示例:

	
		
		
		
	
	

				

				    
Hello world
				
		
	

效果:

4.利用display:table-cell

CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。

示例:

	
		
		
		
	
	

				

				    
Hello world
				
		
	

效果:

5.页面居中

方法一:

示例:

	
		
		
		
	
	

	           
Hello world
		
	

效果:

方法二:

示例:

	
		
		
		
	
	

	
Hello world
		
	

效果:

方法三:

示例:

	
		
		
		
	
	

	          
Hello world
		
	

效果:

方法四:

示例:

	
		
		
		
	
	

		
Hello world
		
	

效果: