html - 并排居中的盒子

Question

我一直在努力学习如何编写两个居中的并排框。我试过 float: left 和 all，它只是不居中。我需要它居中，而不是一个盒子一直在左边，另一个在右边。有什么帮助吗？ CSS，请不要在 html 中。

.boxcontainer {
  background: none;
  height: 275px;padding: 35px;
}

.Box1 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

.Box2 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

Answer 1

我在 .boxcontainer 中添加了 display:flex;justify-content:center

.boxcontainer {background: none;height: 275px;padding: 35px;display:flex;justify-content:center}

.Box1 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s}

.Box2 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s}

<div class="boxcontainer">
  <div class="Box1"></div>
  <div class="Box2"></div>
</div>