在HTML5中，有多种方法可以实现元素的居中显示，以下是一些常见的方法：
1、使用margin属性
通过设置元素的margin属性，可以实现水平和垂直居中，以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body>
<img src="your_image.jpg" alt="Image" class="center">
</body>
</html>
在这个示例中，我们为图片元素添加了一个名为center的类，该类设置了display: block;、margin-left: auto;和margin-right: auto;属性，这将使图片在页面上水平居中，我们设置了width: 50%;，使图片宽度为父容器宽度的50%。
2、使用flexbox布局
HTML5引入了一种新的布局方式，称为Flexbox，通过使用Flexbox，可以轻松地实现元素的居中显示，以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使容器占据整个视口高度 */
}
</style>
</head>
<body>
<div class="container">
<p>这个段落将在容器中居中显示。</p>
</div>
</body>
</html>
在这个示例中，我们创建了一个名为container的div，并为其添加了display: flex;属性，我们设置了justify-content: center;和align-items: center;属性，以实现水平和垂直居中，我们设置了height: 100vh;，使容器占据整个视口高度。
3、使用grid布局
除了Flexbox之外，HTML5还引入了一种新的布局方式，称为Grid，通过使用Grid，也可以实现元素的居中显示，以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
justify-items: center;
align-items: center;
height: 100vh; /* 使容器占据整个视口高度 */
}
</style>
</head>
<body>
<div class="container">
<p>这个段落将在容器中居中显示。</p>
</div>
</body>
</html>
在这个示例中，我们创建了一个名为container的div，并为其添加了display: grid;属性，我们设置了justify-items: center;和align-items: center;属性，以实现水平和垂直居中，我们设置了height: 100vh;，使容器占据整个视口高度。
4、使用position属性和transform属性
通过设置元素的position属性和transform属性，也可以实现元素的居中显示，以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">这个div将在页面上居中显示。</div>
</body>
</html>
在这个示例中，我们为一个div元素添加了一个名为center的类，并设置了position: absolute;、top: 50%;和left: 50%;属性，我们使用了transform属性的translate方法，将元素向左和向上移动其自身宽度和高度的一半，从而实现居中显示，注意，这种方法需要知道元素的宽度和高度，如果元素的宽度和高度是未知的或者动态变化的，这种方法可能不适用。