H5+CSS3 实现div垂直水平居中的几种方式

要使用H5和CSS3实现div的垂直和水平居中，可以使用多种方法。以下是几种常见的方法：

1. 使用Flexbox布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器的高度为视口高度 */
}
 
.content {
  /* 内容样式 */
}

<div class="container">
  <div class="content">居中内容</div>
</div>

2. 使用Grid布局：

.container {
  display: grid;
  place-items: center; /* 同时实现垂直和水平居中 */
  height: 100vh; /* 使容器的高度为视口高度 */
}
 
.content {
  /* 内容样式 */
}

<div class="container">
  <div class="content">居中内容</div>
</div>

3. 使用绝对定位和transform：

.container {
  position: relative;
  height: 100vh; /* 使容器的高度为视口高度 */
}
 
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="content">居中内容</div>
</div>

这些方法都可以实现div的垂直和水平居中，你可以根据自己的需求和项目环境选择合适的方法。