html - 将 div 与位置相对水平对齐

Question

我在一个 div 中有 3 个 div，我希望这 3 个 div 水平对齐。我可以通过给出绝对位置来做到这一点，但我希望它们具有相对位置。为什么我希望它有相对位置是，如果我缩小或放大，div 大小不会改变但这些 div 中的元素会改变。我也希望 div 缩小/放大。这就是为什么我希望它们具有相对位置。

.body_clr {
  background-color: #eceff1;
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.test_div {
  width: 20em;
  height: 20em;
  margin-left: 2em;
  margin-top: 20%;
  position: relative;
  background-color: #f5f5f5;
  display: inline-block;
  float: left;
  z-index: 1;
}
.ff {
  width: 40em;
  height: 100%;
  padding-top: 10%;
  position: relative;
  background-color: #2aabd2;
  float: left;
  margin-left: 20%;
  margin-right: 20%;
  display: inline-block;
}
.overview {
  width: 20em;
  height: 35%;
  background-color: black;
  margin-top: 20%;
  float: left;
  margin-right: 5%;
  position: relative;
  display: inline-block;
  z-index: 1;
}

<div className="body_clr">

  <div className="test_div"></div>
  <div className="ff"></div>
  <div className="overview"></div>

</div>

现在我的 div 没有水平对齐。

Answer 1

我会为此使用flexbox。看看我做的这个例子:https://jsfiddle.net/cfLfLnLx/ .

也可以使用 class 而不是 className 来指定 HTML 元素的类。

关于使用 flexbox 的更详尽的指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/