如何在HTML中使用CSS将div元素水平和垂直居中？

在HTML中使用CSS将`<div>`元素水平和垂直居中，可以采用多种方法，以下是两种常见的做法：

1. **Flexbox** 方法：
如果你的浏览器支持Flexbox，可以在包含元素上设置 `display: flex; justify-content: center; align-items: center;`。例如：

   <style>
     .container {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center; /* 垂直居中 */
       height: 100%; /* 或者给定一个固定高度 */
     }
   </style>
   <div class="container">
     这是居中的内容
   </div>

2. **Grid布局** 方法：
如果你想使用 Grid，设置 `.container` 的样式为 `display: grid; place-items: center;`。示例：

   <style>
     .container {
       display: grid;
       place-items: center; /* 同时水平和垂直居中 */
     }
   </style>
   <div class="container">
     这是居中的内容
   </div>

如果你不确定浏览器兼容性，还可以使用内联样式、绝对定位或传统的浮动技术，但这不是现代推荐的做法。