div中的多个div水平垂直居中

在HTML和CSS中，将多个`<div>`元素同时水平和垂直居中可以采用多种方法，具体取决于容器的布局需求。这里有几个常见的解决方案：

1. **Flexbox**布局：
如果容器是flex容器（例如使用`display: flex;`），你可以使用`justify-content: center;`和`align-items: center;`属性让所有子元素水平和垂直居中。

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2. **Grid**布局：
同样，如果容器是grid容器（`display: grid;`），可以设置`justify-items: center;`和`align-items: center;`。

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

<style>
.container {
  display: grid;
  justify-items: center;
  align-items: center;
}
</style>

3. **Positioning**结合`absolute` or `fixed`：
使用绝对定位(`position: absolute;`)并设置`left: 50%; top: 50%;`然后通过负的外边距(`transform: translate(-50%, -50%);`)来调整元素到中心位置。

<div class="container">
  <div class="centered">Div 1</div>
</div>

<style>
.container {
  position: relative;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>