在HTML5中，让图片居中的方法有很多种，这里我将介绍几种常见的方法，包括使用CSS样式、使用flex布局和使用grid布局。
1、使用CSS样式
我们可以使用CSS的text-align属性来让图片居中，我们需要将图片放入一个容器元素中，然后设置容器元素的text-align属性为center，这样，容器内的内容（包括图片）就会水平居中，我们还需要设置容器元素的display属性为inline-block或block，以便正确应用text-align属性。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="your-image-source.jpg" alt="图片描述" width="300" height="200">
</div>
</body>
</html>
2、使用flex布局
我们可以使用flex布局来实现图片的垂直和水平居中，我们需要将图片放入一个容器元素中，然后设置容器元素的display属性为flex，并设置justify-content和align-items属性为center，这样，容器内的内容（包括图片）就会在水平和垂直方向上居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 设置容器的高度 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image-source.jpg" alt="图片描述" width="300" height="200">
</div>
</body>
</html>
3、使用grid布局
我们可以使用grid布局来实现图片的垂直和水平居中，我们需要将图片放入一个容器元素中，然后设置容器元素的display属性为grid，并设置justify-items和align-items属性为center，这样，容器内的内容（包括图片）就会在水平和垂直方向上居中，我们还需要设置容器元素的grid-template-rows和grid-template-columns属性为1fr，以便正确应用网格布局。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
justify-items: center;
align-items: center;
height: 300px; /* 设置容器的高度 */
grid-template-rows: 1fr; /* 设置行高为1fr */
grid-template-columns: 1fr; /* 设置列宽为1fr */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image-source.jpg" alt="图片描述" width="300" height="200">
</div>
</body>
</html>
以上就是在HTML5中让图片居中的三种方法，这些方法可以根据实际需求进行选择和组合，以实现不同的效果，希望对你有所帮助！