html - 将多个并排的 div 居中

Question

我正在尝试制作多个 div，特别是五个，并将它们全部居中。我已经使用 display:inline-block 让它们并排，但是当我使用 margin: 0 auto 时，display:inline-block 似乎被否定了，然后它是页面下方的垂直 strip 。

下面是我的代码:

div {
  width: 50px;
  height: 300px;
  border-radius: 0;
  display: inline-block;
}
#red {
  background-color: red;
}
#orange {
  background-color: orange;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
#blue {
  background-color: blue;
}

<div class="container">
  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>

我试着查看有关 SO 的其他相关帖子，但他们没有使用尽可能多的 div，或者他们使用我不想使用的静态定位。

有人能指出我正确的方向吗？

Answer 1

发生这种情况是因为容器的宽度为 50 像素。一种快速解决方案是将容器的 width 设置为 100%:

div {
  width: 50px;
  height: 300px;
  border-radius: 0;
  display: inline-block;
}
#red {
  background-color: red;
}
#orange {
  background-color: orange;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
#blue {
  background-color: blue;
}
.container {
  width: 100%;
}

<div class="container">
  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>

您可以使用 text-align center to container 对齐到中心:

div {
  width: 50px;
  height: 300px;
  border-radius: 0;
  display: inline-block;
}
#red {
  background-color: red;
}
#orange {
  background-color: orange;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
#blue {
  background-color: blue;
}
.container {
  width: 100%;
  text-align: center;
}

<div class="container">
  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>

要同时实现垂直和水平对齐，您可以对容器使用 position: absolute top: 50% left: 50% 和margin-top: -150px;/* 高度的一半 */ margin-left: -135px;/* 宽度的一半 */:

div {
    width: 50px;
    height: 300px;
    border-radius: 0;
    display:inline-block;
}
#red {
    background-color: red;
}
#orange {
    background-color: orange;
}
#yellow {
    background-color: yellow;
}
#green {
    background-color: green;
}
#blue {
    background-color: blue;
}

.container {
    width: 270px;
    position: absolute;
    top: 50%;
    left:50%;
    margin-top: -150px; /* Half the height */
    margin-left: -135px; /* Half the width */
}

<div class="container">
  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>