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

Question

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

注意：虚线仅供参考，显示 .inner-a 和 .inner-b 水平和垂直居中对齐到中间 .outer 的假想分割。

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

这是我目前所拥有的：

HTML

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

CSS

.outer {
  width: 300px;
  height: 300px;
}
.inner-a, inner-b {
  width: 100px;
  height: 100px;
}
.inner-a {
  float:left;
}
.inner-b {
  float: right;
}

Answer 1

.outer { display: inline-flex; align-items: center; }

Answer 2

试试这个：

.outer {
  width: 500px;
  height: 300px;
  text-align:center;
  border:2px solid red
}
.inner-a, .inner-b {
  width: 100px;
  height: 100px;
  display:inline-block;
   border: 2px solid #000;
   margin: 10px;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
  border:2px solid #000;
  margin:10px;
}

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

Answer 3

由于您使用的是 Bootstrap 4，因此您可以 use the flexbox utils 并避免额外的 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>

https://www.codeply.com/go/fA7OzCOQVp

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

How to middle align two inner divs inside a container?

css

twitter-bootstrap

bootstrap-4