在HTML中，我们可以使用CSS样式来控制图片的居中显示，有多种方法可以实现图片居中，以下是一些常见的方法：
1、使用margin属性
我们可以使用margin属性来实现图片的居中，将图片的左右margin设置为auto，然后设置一个宽度，就可以实现图片在其父元素中的水平居中。
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body>
<img src="your_image.jpg" alt="Image">
</body>
</html>
2、使用text-align属性
如果我们的图片是在一个块级元素（如div）中，我们可以使用text-align属性来实现图片的居中，将块级元素的text-align属性设置为center，图片就会在其内部居中。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: center;
}
img {
display: inline-block;
}
</style>
</head>
<body>
<div>
<img src="your_image.jpg" alt="Image">
</div>
</body>
</html>
3、使用flexbox布局
我们可以使用flexbox布局来实现图片的居中，将包含图片的元素设置为一个flex容器，然后将图片的flex属性设置为center，就可以实现图片的居中。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 或者你可以设置一个具体的值 */
}
img {
max-width: 100%; /* 确保图片不会超出容器的宽度 */
height: auto; /* 确保图片的高度会自动调整以保持其宽高比 */
}
</style>
</head>
<body>
<div class="container">
<img src="your_image.jpg" alt="Image">
</div>
</body>
</html>
4、使用表格布局和vertical-align属性
我们可以使用表格布局和vertical-align属性来实现图片的居中，将图片放在一个单元格中，然后将单元格的垂直对齐方式设置为middle，就可以实现图片的居中，这种方法在旧版本的IE浏览器中可能不起作用。
<!DOCTYPE html>
<html>
<head>
<style>
table { display: table; width: 100%; height: 100%; } /* 创建一个100%宽度和高度的表格 */
tr { display: table-row; } /* 创建一个表格行 */
td { display: table-cell; vertical-align: middle; text-align: center; } /* 创建一个表格单元格，并设置垂直对齐方式为middle */
</style>
</head>
<body>
<table>
<tr>
<td><img src="your_image.jpg" alt="Image"></td>
</tr>
</table>
</body>
</html>
以上就是在HTML中实现图片居中的一些常见方法，需要注意的是，这些方法可能在不同的浏览器和设备上有不同的效果，因此在实际应用中可能需要进行一些调整和优化。