在HTML5中，将图片居中显示可以通过多种方法实现，以下是一些常见的方法：
1、使用CSS样式
可以使用CSS样式来控制图片的对齐方式，使其居中显示，以下是一个示例代码：
<!DOCTYPE html> <html> <head> <style> .center { display: block; marginleft: auto; marginright: auto; width: 50%; } </style> </head> <body> <img src="your_image.jpg" alt="图片" class="center"> </body> </html>在这个示例中，我们创建了一个名为.center的CSS类，用于设置图片的对齐方式，通过将display属性设置为block，我们可以确保图片以块级元素的方式显示，我们使用marginleft和marginright属性将图片的左右边距设置为自动，从而使图片在容器中居中，我们设置了图片的宽度为容器宽度的一半。
2、使用Flexbox布局
另一种方法是使用Flexbox布局来实现图片的居中显示，以下是一个示例代码：
<!DOCTYPE html> <html> <head> <style> .container { display: flex; justifycontent: center; alignitems: center; height: 100vh; /* 使容器高度与视口高度相同 */ } </style> </head> <body> <div class="container"> <img src="your_image.jpg" alt="图片"> </div> </body> </html>在这个示例中，我们创建了一个名为.container的CSS类，用于设置容器的布局方式，通过将display属性设置为flex，我们可以启用Flexbox布局，我们使用justifycontent和alignitems属性将容器的内容水平和垂直居中，我们设置了容器的高度为视口高度（100vh），以确保容器的高度与视口高度相同。
3、使用表格布局
除了上述两种方法外，我们还可以使用表格布局来实现图片的居中显示，以下是一个示例代码：
<!DOCTYPE html> <html> <head> <style> .container { display: table; /* 将容器显示为表格 */ width: 100%; /* 设置容器宽度为100% */ } .cell { display: tablecell; /* 将单元格显示为表格单元格 */ verticalalign: middle; /* 设置单元格内容垂直居中 */ textalign: center; /* 设置单元格内容水平居中 */ } </style> </head> <body> <div class="container"> <div class="cell"> <img src="your_image.jpg" alt="图片"> </div> </div> </body> </html>在这个示例中，我们创建了一个名为.container的CSS类，用于设置容器的布局方式，通过将display属性设置为table，我们可以将容器显示为表格，我们设置了容器的宽度为100%，以确保容器占据整个页面宽度，接下来，我们创建了一个名为.cell的CSS类，用于设置单元格的布局方式，通过将display属性设置为tablecell，我们可以将单元格显示为表格单元格，我们使用了verticalalign和textalign属性来设置单元格内容的垂直和水平居中，我们将图片放置在一个单元格内，从而实现了图片的居中显示。
