如何将HTML元素在整个网页上实现水平和垂直居中布局？

在HTML中实现元素的水平和垂直居中通常有两种常见的方法：

1. **Flexbox**:
如果你的目标浏览器支持Flexbox，你可以使用CSS的`display: flex; justify-content: center; align-items: center;`属性。例如，给包含元素的容器设置`display: flex;`，然后对容器应用`justify-content` 和 `align-items` 属性，可以使其内部内容水平和垂直居中。

.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

2. **Grid Layout**:
CSS Grid也提供了类似的居中功能。将容器设置为`display: grid;`，并使用`place-items: center;`就可以达到效果。

.container {
   display: grid;
   place-items: center;
}

3. **Positioning with Padding and Negative Margins** (兼容性更好):
对于老版本的浏览器，可以利用绝对定位(`position: absolute;`)配合padding和负margin。设置元素的宽度和高度为100%，然后用top、bottom、left和right设置负值来居中。

.centered-element {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* 需要指定宽高 */
   width: 100px;
   height: 100px;
}