HTML, CSS, Bootstrap - 两列居中答案

【问题标题】：HTML, CSS, Bootstrap - Two columns with centeringHTML, CSS, Bootstrap - 两列居中
【发布时间】：2017-08-15 12:32:27
【问题描述】：

我正在尝试制作一个应该有两列的小网站，并且每列的内容都应该居中。

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

在JSFiddle中可以看到右边的“Hello”没有完全居中；它已向上移动以与左侧三个“Hello”中的第一个对齐。我希望这样，每当我向一列添加内容时，它不会影响另一列 - 所以右侧的“Hello”应该完全居中。

JSFiddle:https://jsfiddle.net/goupb2ch/1/

我已经为此工作了很长时间。有任何想法吗？谢谢！

【问题讨论】：

为什么不使用 bootstrap 4 并使用 flex-box？ Flexbox 让你的愿望成真！
@Randy 感谢您的意见。如果我没有得到任何答案，我可能不得不这样做。我刚从 3.3.7 开始。因为它是最新的稳定版本
Bootstrap 4 目前相当稳定。我认为 3.3.7 在新项目发布后会很快被替换，所以了解 flex-box 的作用和原因不会有什么坏处。如果您阅读 flex-box 问题，您会发现自己的问题被复杂的代码或简单的 flexbox 解决方案回答了几次。
@Randy 我肯定会这样做，听起来是一个非常有用的工具。干杯人。

标签： html css bootstrap-4

【解决方案1】：

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

https://jsfiddle.net/upwgk2u4/

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

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

【讨论】：

为了清楚起见，这个答案与 Bootstrap 没有任何关系。 display: flex 是 CSS 的东西，而不是 Bootstrap 的东西。
@thesystem Flexbox 不限于 bootstrap 4，它只是一个 CSS 规则。 Flexbox 是在 Bootstrap 4 中实现的，而在 Bootstrap 3 中没有实现，但是您始终可以像他一样使用自己的规则扩展 CSS 并使用 flexbox。但请记住，旧版浏览器不支持该 flex-box。

【解决方案2】：

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

https://www.codeply.com/go/0zwGz83Cbw

<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>

【讨论】：