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;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<div>
			<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
		</div>
	</div>

圖片垂直居中

如下圖所示

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

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




	<!-- HTML-->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

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;
	}
	
	

	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<div>
			<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
		</div>
	</div>

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

圖片水平居中

如下圖所示

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;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

有什麼問題歡迎評論留言，我會及時回覆你的