CSS让图片(垂直水平居中、垂直居中、水平居中)方法

图片水平垂直居中

如下图所示

1.使用text-align: center配合line-height完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		line-height: 300px;
	}
	.vertical>img{
		margin-top: calc((300px - 100px)/2);
		width: 100px; 
		height: 100px;
	}



	
	

		
	

2.使用text-align: center配合position: absolute完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		position: relative;
	}
	.vertical>img{
		position: absolute;
		top: 50%;
		margin-top: -50px;
		width: 100px; 
		height: 100px;
	}



	
	

		
	

3.使用text-align: center配合display: flex完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.vertical>img{
		margin: 0 auto;
		width: 100px; 
		height: 100px;
	}



	
	

		
	

4.使用text-align: center配合display: table完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		display: table;
	}
	.vertical>div{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.vertical>div>img{
		width: 100px;
		height: 100px;
	}



	
	

		

			
		
	

图片垂直居中

如下图所示

1.使用display: flex完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height: 300px;
		background-color: #ddd;
		display: flex;
		align-items: center;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
	}




	
	

		
	

2.使用绝对定位完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		position: relative;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;
	}
	
	

	
	

		
	

3.使用display: table完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		display: table;
	}
	.vertical>div{
		display: table-cell;
		vertical-align: middle;
	}
	.vertical>div>img{
		width: 100px;
		height: 100px;
	}



	
	

		

			
		
	

4.使用line-height完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		line-height: 300px;
	}
	.vertical>img{
		margin-top: calc((300px - 100px)/2);
		width: 100px;
		height: 100px;
	}



	
	

		
	

图片水平居中

如下图所示

1.使用text-align: center完成水平居中(如若不行在img属性加上margin:0 auto)

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
	}



	
	

		
	

有什么问题欢迎评论留言，我会及时回复你的