将顶部、中间、底部 div 水平居中放置到容器中。使用 Bootstrap 4 类

【问题标题】：Horizontally center top, middle, bottom divs into container. Using Bootstrap 4 classes将顶部、中间、底部 div 水平居中放置到容器中。使用 Bootstrap 4 类
【发布时间】：2020-12-05 02:29:48
【问题描述】：

我不知道如何将 div 元素水平居中。

.d-flex.flex-row.justify-content-center
    div.align-self-start
        p Top

    div.align-self-center
        p Middle

    div.align-self-end
        p Bottom

【问题讨论】：

请提供minimal, reproducible example，其中包含创建所提供示例所需的信息（如这些 div 的 html 和 css）。
可以在here找到合理的重复项

标签： html css bootstrap-4

【解决方案1】：

很难具体解决您的情况，因为您的问题和提供的示例非常模糊。话虽如此，this jsfiddle 展示了一种方法，您可以根据 flex 容器中的类水平居中 div 元素。

<div id="parent">
  <div class="centered">Top</div>
  <div class="centered">Mid</div>
  <div class="centered">Bot</div>
</div>

#parent {
  width: 256px;
  height: 256px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
div.centered {
  width: 64px;
  height: 64px;
  background-color: #33ee33;
  align-self: center;
}

【讨论】：