Html 如何将2个绝对div居中

我知道我可以像这样在所有其他元素前面居中放置一个绝对div

HTML

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'></div>

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'>
  <div class='centerDiv1'>
  </div>
  <div class='centerDiv2'>
  </div>

这样，div将完美地与中心对齐并响应

因此，我的问题如下：

放置两个div的最佳方法是什么，使其与前一个div完全对齐，同时保持灵敏

在大屏幕上

在小屏幕上

---

如果您有任何想法，请让我知道（：

将2个div存储在1个绝对定位的div中，该div居中。

设置一个带位置的中心div，并在其中添加两个div。请参阅下面的html

HTML

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'></div>

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'>
  <div class='centerDiv1'>
  </div>
  <div class='centerDiv2'>
  </div>

---

使用以下代码：

HTML:

.centerDiv{
显示：内联块；
宽度：80%；
文本对齐：居中；
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
}
.centerDiv2{
边框：1px纯红；
保证金：0自动；
宽度：45%；
}
.左，.右{
显示：内联块；
}
@仅介质屏幕和（最大宽度：760像素）{
左边
.对{
显示：块；
}
.左{
边缘底部：20px；
}
}

堆栈
abc
xyz

这并不是一个复杂的解决方案。可能与

.centerDiv{
display: inline-block;
width: 80%;
text-align: center;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}

.centerDiv2{
border: 1px solid red;
margin: 0 auto;
width: 40%;
}

.left{
float: left;
}

.right{
float: right;
}