在HTML中，使图片居中显示有多种方法，以下是一些常见的方法：
1、使用<center>标签
在HTML4中，可以使用<center>标签将图片居中。<center>标签在HTML5中已被废弃，因此不建议使用。
<center> <img src="yourimage.jpg" alt="示例图片"> </center>2、使用CSS的textalign: center;属性
可以通过将包含图片的<div>元素的textalign属性设置为center，使图片在其容器中居中，这种方法适用于任何类型的元素，不仅仅是图片。
<!DOCTYPE html> <html> <head> <style> .center { textalign: center; } </style> </head> <body> <div class="center"> <img src="yourimage.jpg" alt="示例图片"> </div> </body> </html>3、使用CSS的margin: auto;属性
可以将包含图片的<div>元素的margin属性设置为auto，并设置宽度为一个具体的值，使图片在其容器中水平居中，这种方法同样适用于任何类型的元素。
<!DOCTYPE html> <html> <head> <style> .center { display: block; marginleft: auto; marginright: auto; width: 50%; } </style> </head> <body> <div class="center"> <img src="yourimage.jpg" alt="示例图片"> </div> </body> </html>4、使用CSS的Flexbox布局
可以使用Flexbox布局将图片居中，需要将包含图片的<div>元素的display属性设置为flex，然后使用justifycontent: center;属性使其在水平方向上居中，这种方法同样适用于任何类型的元素。
<!DOCTYPE html> <html> <head> <style> .center { display: flex; justifycontent: center; } </style> </head> <body> <div class="center"> <img src="yourimage.jpg" alt="示例图片"> </div> </body> </html>5、使用CSS的Grid布局（Grid布局是Flexbox布局的升级版）
可以使用Grid布局将图片居中，需要将包含图片的<div>元素的display属性设置为grid，然后使用justifyitems: center;属性使其在水平方向上居中，这种方法同样适用于任何类型的元素，还可以使用gridtemplatecolumns: repeat(autofit, minmax(200px, 1fr));属性使图片在垂直方向上也居中，这种方法适用于响应式设计。
<!DOCTYPE html> <html> <head> <style> .center { display: grid; justifyitems: center; gridtemplatecolumns: repeat(autofit, minmax(200px, 1fr)); } </style> </head> <body> <div class="center"> <img src="yourimage.jpg" alt="示例图片"> </div> </body> </html>6、使用CSS的Table布局（不推荐）
可以使用Table布局将图片居中，需要将包含图片的<div>元素的display属性设置为table, width: 100%, bordercollapse: collapse;, 然后使用margin: auto;属性使其在水平方向上居中，这种方法不推荐使用，因为它会导致浏览器渲染性能下降，在某些情况下，它可能是唯一的解决方案，当其他方法无法实现所需的效果时。
