css中怎么让img图片居中

css中怎么让img图片居中？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

成都创新互联基于分布式IDC数据中心构建的平台为众多户提供服务器托管四川大带宽租用成都机柜租用成都服务器租用。

首先我们来了解一下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>

效果图：

css中怎么让img图片居中

说明：

在demo盒子中设置display: table-cell;会让demo盒子作为一个表格单元格显示（类似 <td> 和 <th>），在设置text-align: center;就会让img图片水平居中，设置vertical-align: middle;让img图片垂直居中。

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中怎么让img图片居中

说明：

设置display: flex;实现flex弹性布局，在设置justify-content: center;让图片水平居中对齐，设置align-items: center;让图片垂直居中对齐。

感谢各位的阅读！看完上述内容，你们对css中怎么让img图片居中大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

文章题目：css中怎么让img图片居中
当前URL：https://www.cdcxhl.com/article30/jiccso.html

成都网站建设公司_创新互联，为您提供企业建站、移动网站建设、网站设计公司、网站改版、网站建设、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容