HTML、CSS、Bootstrap-两列居中

我正在尝试制作一个小网站，它应该有两个栏目，每个栏目都应该以内容为中心

但是，我注意到，这些柱将跟随彼此的高度，而不是作为单独的柱。例如，每当我向其中一列添加内容时，另一列的内容将被移动以适应该列的高度

在JSFIDLE中，您可以看到右侧的“Hello”并没有完全居中；它被移动到与左侧三个“Hello”中的第一个对齐。我希望这样，每当我在一个专栏中添加内容时，它不会影响另一个专栏——因此右侧的“Hello”最好保持完全居中

JSFiddle

：

---

我已经为此工作了很长一段时间了。有什么想法吗？谢谢

考虑使用flexbox解决您的问题：在这种情况下，所需的代码要少得多

---

考虑使用flexbox来解决您的问题：在这种情况下，所需的代码要少得多

---

为什么不使用Bootstrap4中已有的功能不需要额外的CSS

你好

你好

你好

你好

为什么不使用Bootstrap 4中已有的功能不需要额外的CSS

你好

你好

你好

你好

为什么不使用bootstrap 4和flex box？Flexbox让您的愿望成真@兰迪：谢谢你的意见。如果我得不到任何答案，我可能不得不这么做。我刚从3.3.7开始。因为它是最新的稳定版本Bootstrap4目前非常稳定。我认为3.3.7在新项目发布后将很快被取代，所以了解flex box的功能和原因不会有什么坏处。如果你仔细阅读flexbox的问题，你会发现你自己的问题用复杂的代码或简单的flexbox解决方案回答了几次。@Randy I肯定会这样做，听起来是一个非常有用的工具。干杯，为什么不使用Bootstrap4和FlexBox呢？Flexbox让您的愿望成真@兰迪：谢谢你的意见。如果我得不到任何答案，我可能不得不这么做。我刚从3.3.7开始。因为它是最新的稳定版本Bootstrap4目前非常稳定。我认为3.3.7在新项目发布后将很快被取代，所以了解flex box的功能和原因不会有什么坏处。如果你仔细阅读flexbox的问题，你会发现你自己的问题用复杂的代码或简单的flexbox解决方案回答了几次。@Randy I肯定会这样做，听起来是一个非常有用的工具。干杯，伙计。我要说清楚，这个答案和引导毫无关系<代码>显示：flex是CSS的东西，不是引导的东西。@系统Flexbox不限于引导4，它只是一个CSS规则。Flexbox是在Bootstrap 4中实现的，而不是在Bootstrap 3中实现的，但是您可以像他那样使用自己的规则扩展CSS并使用Flexbox。但是请记住，老版本的浏览器不支持flex box。要清楚，这个答案与引导无关<代码>显示：flex是CSS的东西，不是引导的东西。@系统Flexbox不限于引导4，它只是一个CSS规则。Flexbox是在Bootstrap 4中实现的，而不是在Bootstrap 3中实现的，但是您可以像他那样使用自己的规则扩展CSS并使用Flexbox。但请记住，旧浏览器不支持flex box。

.container {
  display: flex;
  text-align: center;
  height: 100%;
}

.container > div {
  flex: 1;
  align-self: center;
}

<div class="container">
    <div class="row">
        <div class="col-md-6 text-center">
            <p>Hello</p>
            <p>Hello</p>
            <p>Hello</p>
        </div>
        <div class="col-md-6 align-self-center text-center">
            <p>Hello</p>
        </div>
    </div>
</div>