css如何让img图片居中？css的display属性实现图片居中（代码实例）

互联网 18-10-19

在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让img图片居中显示呢？本篇文章给大家带来css如何让img图片居中？css的display属性实现图片居中（代码实例），让大家可以了解并掌握css的display属性设置img图片居中的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

首先我们来了解一下display属性实现图片居中的两种方法是什么？

1、利用display的table-cell属性值，再配合text-align: center;与vertical-align: middle;设置图片居中

2、设置display: flex;，利用弹性布局flex来设置img图片的居中

下面我们通过简单的代码示例，详细了解一下这两种方法是怎么实现图片居中的。

1、利用display:table-cell来实现img标签图片的水平和垂直居中

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title>img图片居中</title> 		<style> 			.demo{ 				width: 400px; 		        height: 300px; 		        border: 1px dashed #000; 		        display: table-cell; /*主要是这个属性*/ 		        vertical-align: middle; 		        text-align: center; 			} 			.demo img{ 				width: 200px; 				height: 150px; 			} 		</style> 	</head> 	<body> 		<div class="demo"> 			<img src="1.jpg" /> 		</div> 	</body> </html>

效果图：

说明：

2、弹性布局flex

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title>img图片居中</title> 		<style> 			*{margin: 0;padding:0;} 			.demo{ 				width: 400px; 		        height: 300px; 		        margin: 50px auto; 		        border: 1px dashed #000; 		        display: flex; 		        justify-content: center; 		        align-items: center; 			} 			.demo img{ 				width: 200px; 				height: 150px; 			} 		</style> 	</head> 	<body> 		<div class="demo"> 			<img src="1.jpg" /> 		</div> 	</body> </html>

说明：

总结：以上就是css的display属性实现图片居中两种方法的全部介绍，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程，Html5视频教程，bootstrap视频教程！

以上就是css如何让img图片居中？css的display属性实现图片居中（代码实例）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：弹性布局