在 CSS 中有五种常用方法将图片居中：text-align: center、margin: auto、display: flex 和 justify-content: center、transform: translate(-50%, -50%)、object-fit: contain。选择最合适的方法取决于具体需求。
CSS 图片居中的方法
在 CSS 中，有很多方法可以将图片居中。下面列出了一些最常见的方法：
1. 使用 text-align: center
这种方法将图片设置为内联元素，并使用 text-align: center 属性将其居中。
立即学习“前端免费学习笔记（深入）”；
<code class="css"><p style="text-align: center;"><img src="image.png"></p></code>
2. 使用 margin: auto
这种方法将图片设置为块级元素，并使用 margin: auto 属性使其在水平方向上居中。
<code class="css"><div style="margin: auto;"><img src="image.png"></div></code>
3. 使用 display: flex 和 justify-content: center
系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片
0
这种方法使用 flexbox 布局，将容器设置为 flexbox 容器，并将 justify-content 属性设置为 center，以使其子元素在水平方向上居中。
<code class="css"><div style="display: flex; justify-content: center;"><img src="image.png"></div></code>
4. 使用 transform: translate(-50%, -50%);
这种方法使用 CSS 转换，将图片向左和向下平移 50%，以使其在水平和垂直方向上居中。
<code class="css"><img style="transform: translate(-50%, -50%);" src="image.png"></code>
5. 使用 object-fit: contain
这种方法将图片作为对象嵌入到容器中，并使用 object-fit: contain 属性使其在容器内居中。
<code class="css"><div style="width: 100px; height: 100px;"><img style="object-fit: contain;" src="image.png"></div></code>
这些只是在 CSS 中将图片居中的众多方法中的几个。选择最适合特定需求的方法非常重要。
以上就是css图片居中的方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
266
收藏
