如何在 HTML 和 CSS 中使一个 div 元素水平和垂直居中显示？

要在HTML和CSS中使一个`<div>`元素水平和垂直居中，你可以使用以下几种方法：

1. **Flexbox布局**:
如果浏览器支持Flexbox，可以给包含`<div>`的容器设置`display: flex; justify-content: center; align-items: center;`。例如：

<div class="container">
  <div class="centered-div">内容</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 或者设置一个具体的高度 */
}
.centered-div {
  width: 100%; /* 宽度自适应或设置一个具体的宽度 */
}
</style>

2. **Grid布局**:
同样，如果支持Grid布局，将容器设为`display: grid;`并加上相应的对齐属性：

<div class="container">
  <div class="centered-div">内容</div>
</div>

<style>
.container {
  display: grid;
  place-items: center;
  height: 100%; /* 或者设置一个具体的height */
}
.centered-div {
  /* 如果宽度未知，可以用min-width: 0; */
}
</style>

3. **Positioning** (老式方法):
使用绝对定位(`position: absolute;`)配合`top: 50%; left: 50%; transform: translate(-50%, -50%);`，但这需要外部容器有明确的高度和宽度：

<div class="outer-container" style="position: relative;">
  <div class="centered-div" style="position: absolute; top: 50%; left: 50%;
     transform: translate(-50%, -50%);">
    内容
  </div>
</div>