CSS实现div居中的六种方式

方式一

父亲与自己的宽高不变的情况下使用



	
		
		水平垂直居中方式一
		
	
	
		

方式二

使用margin:auto;实现



	
		
		水平垂直居中二
		
	
	
		

方式三

使用 transform: translate(-50%,-50%);



	
		
		水平垂直居中三
		
	
	
		

 方式四

使用display: table-cell;



	
		
		水平垂直居中四
		
	
	
		

方式五

使用display: flex;

 justify-content 和 align-items



	
		
		水平垂直居中5.1
		
	
	
		

align-self: center; 和 margin: 0 auto; 或 align-self: center; 和 justify-content: center;



	
		
		水平垂直居中5.2
		
	
	
		

方式六

使用display:grid;



	
		
		水平垂直居中六
		
	
	
		

最后

玩到极致,便是艺术。

加油铁汁。

你可能感兴趣的:(前端,css,css3)