Css 如何在容器中对齐两个内部div？

我一直在努力实现以下目标：

注：虚线只是一个指南，显示

.internal-a

和

.internal-b

都是水平和垂直居中对齐的，与

.outer

的假想中间部分对齐

这是否可能仅仅使用CSS？还是需要一些javascript来实现

以下是我到目前为止所拥有的：

HTML

<div class="outer">
  <div class="inner-a"></div>
  <div class="inner-b"></div>
</div>

试试这个：

.outer{
宽度：500px；
高度：300px；
文本对齐：居中；
边框：2件纯红
}
.inner-a、.inner-b{
宽度：100px；
高度：100px；
显示：内联块；
边框：2倍实心#000；
利润率：10px；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
边框：2倍实心#000；
利润率：10px；
}

试试这个：

.outer{
宽度：500px；
高度：300px；
文本对齐：居中；
边框：2件纯红
}
.inner-a、.inner-b{
宽度：100px；
高度：100px；
显示：内联块；
边框：2倍实心#000；
利润率：10px；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
边框：2倍实心#000；
利润率：10px；
}

---

由于您使用的是Bootstrap 4，因此可以避免额外的CSS

<div class="outer d-inline-flex justify-content-center align-items-center">
      <div class="inner-a">a</div>
      <div class="inner-b">b</div>
</div>

A.
B

---

由于您使用的是Bootstrap 4，因此可以避免额外的CSS

<div class="outer d-inline-flex justify-content-center align-items-center">
      <div class="inner-a">a</div>
      <div class="inner-b">b</div>
</div>

A.
B

---

给我们更多信息，可能是一些HTML代码和内部元素的高度。@makshh刚刚添加。给我们更多信息，可能是一些HTML代码和内部元素的高度。@makshh刚刚添加。“flex容器”非常方便；）“柔性容器”它们非常方便；）谢谢@ZimSystem！我不知道BS4已经内置了它。谢谢@ZimSystem！我不知道它已经内置在BS4中了。

<div class="outer d-inline-flex justify-content-center align-items-center">
      <div class="inner-a">a</div>
      <div class="inner-b">b</div>
</div>