html - 带有 CSS 的动态居中标题栏

Question

目前我有这个标题栏

#header {
  display: flex;
  align-items: center;
  height: 60px;
  background: gray;
}

.box {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  background: red;
}

<div id="header">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

我希望容器在父容器的中心对齐。

如您所见，在添加更多 div 或删除其中一些时，我总是希望栏居中。

Answer 1

添加 justify-content: space-around 规则:

#header {
  display: flex;
  align-items: center;
  height: 60px;
  background: gray;
  justify-content: space-around;
}

.box {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  background: red;
}

<div id="header">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>