让div水平居中的css方法

一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

1、给要设置水平居中的div设置display:block  ,margin:0 auto,width   ,  height4个属性,可以让块级元素水平居中(默认情况下,div的position:static)




	test
	
	


 

显示的效果:

让div水平居中的css方法_第1张图片


2、给要水平居中的div设置属性:width    height      position       left      margin-left     

    其中left:50%            position:的值除了static之外的都可以           marin-left:的值为负数,数值大小为width的一半




	test
	
	


 

让div水平居中的css方法_第2张图片

二、让div竖直居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)

1、给要竖直居中的div设置属性:width    height      position       top     margin-top

 top:50%          margin-top:为负值,值大小为height的一半                 position为absolute或者fixed   




	test
	
	


 
让div水平居中的css方法_第3张图片


三、让div同时水平竖直居中的方法

1、同时水平竖直居中的div设置属性:width    height      position       top     margin-top     left      margin-left

     top:50%   left:50%     position:absolute/fixed           margin-top:-height/2                 margin-left:-width/2




	test
	
	


 

让div水平居中的css方法_第4张图片
2、给要水平居中的div设置属性:width    height      position       left      margin-left     

你可能感兴趣的:(css)