在HTML5中，有多种方法可以实现图片居中显示，以下是一些常见的方法：
1、使用CSS样式居中
可以使用CSS的margin: auto;属性来实现图片的水平和垂直居中，将图片放入一个块级元素（如<div>）中，然后为该元素设置text-align: center;属性以实现水平居中，为图片本身设置margin: auto;属性以实现垂直居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
.center img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="center">
<img src="your_image.jpg" alt="Your Image">
</div>
</body>
</html>
2、使用flex布局居中
可以使用CSS的flex布局来实现图片的居中，将图片放入一个容器元素（如<div>）中，然后为该容器元素设置display: flex;和justify-content: center;属性以实现水平居中，为图片本身设置margin: auto;属性以实现垂直居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
}
.container img {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="your_image.jpg" alt="Your Image">
</div>
</body>
</html>
3、使用表格布局居中
可以使用HTML的表格布局来实现图片的居中，创建一个包含一个单元格的表格，然后将图片放入该单元格中，接下来，为表格设置width: 100%;属性以使其填充整个页面，并为表格单元格设置text-align: center;属性以实现水平居中，为图片本身设置vertical-align: middle;属性以实现垂直居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
height: 100%;
}
td {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="your_image.jpg" alt="Your Image"></td>
</tr>
</table>
</body>
</html>
4、使用绝对定位居中（适用于单张图片）
可以使用CSS的绝对定位来实现单张图片的居中，将图片放入一个相对定位的容器元素（如<div>）中，然后为该容器元素设置宽度和高度，接下来，为图片本身设置position: absolute;、top: 50%;、left: 50%;和transform: translate(-50%, -50%);属性以实现水平和垂直居中，这种方法只适用于单张图片。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 100%;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="your_image.jpg" alt="Your Image">
</div>
</body>
</html>