如何在容器内中间对齐两个内部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

试试这个：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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