在HTML5中，使元素居中显示是一个常见的需求。以下将详细介绍五种实用的方法，帮助您轻松实现元素的水平和垂直居中。
方法一：使用Flexbox布局
Flexbox是CSS3中的一种布局方式，它提供了一种更加灵活的布局模型。以下是一个使用Flexbox实现元素居中的示例：
在上面的代码中，
.container
类设置了
display: flex;
，
.centered-element
类则通过
justify-content: center;
和
align-items: center;
实现了水平和垂直居中。
方法二：使用Grid布局
Grid布局是另一种CSS3布局方式，它提供了一种二维布局模型。以下是一个使用Grid布局实现元素居中的示例：
在上面的代码中，
.container
类设置了
display: grid;
和
place-items: center;
，
.centered-element
类则通过
place-items: center;
实现了水平和垂直居中。
方法三：使用绝对定位和transform
以下是一个使用绝对定位和transform实现元素居中的示例：
在上面的代码中，
.centered-element
类通过设置
top: 50%;
和
left: 50%;
将元素定位到容器的中心，然后通过
transform: translate(-50%, -50%);
将元素平移回自身的中心位置。
方法四：使用表格单元格对齐
以下是一个使用表格单元格对齐实现元素居中的示例：
在上面的代码中，
.container
类设置了
display: table;
，
.centered-element
类则通过
display: table-cell;
和
vertical-align: middle;
实现了水平和垂直居中。
方法五：使用CSS的vertical-align属性
以下是一个使用CSS的vertical-align属性实现元素居中的示例：
在上面的代码中，
.container
类设置了
text-align: center;
，
.centered-element
类则通过
display: inline-block;
和
vertical-align: middle;
实现了水平和垂直居中。
以上五种方法都是实现HTML5元素居中的实用方法，您可以根据实际需求选择合适的方法。