在HTML中，我们可以使用CSS样式来控制图片的居中显示，以下是一些常见的方法：
1、使用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属性：这种方法是通过将父元素的text-align属性设置为center，使得其子元素（包括图片）都居中显示。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="your_image.jpg" alt="Image">
</div>
</body>
</html>
3、使用flexbox布局：这种方法是通过将父元素的display属性设置为flex，然后设置justify-content属性为center，使得其子元素（包括图片）都居中显示。
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div>
<img src="your_image.jpg" alt="Image">
</div>
</body>
</html>
4、使用position和transform属性：这种方法是通过将图片的位置设置为绝对定位，然后通过transform属性的translate方法将其移动到父元素的中心位置，这种方法需要知道父元素的宽度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
width: 50%; /* You need to know the width of the parent element */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<img src="your_image.jpg" alt="Image">
</div>
</body>
</html>
以上就是在HTML中实现图片居中的几种常见方法，你可以根据实际需求选择合适的方法。