垂直和水平居中，同时遵守flexbox的html规则

我正在尝试使用flexbox制作类似于引导类的东西。我希望所有内容都垂直和水平居中，但我希望框内的所有内容都遵守标准HTML规则。也就是说，如果我先做一个

，然后再做一个

，我希望它们在不同的行上；然而，就我目前的flexbox属性而言，这并没有发生。请参见下面的示例——它看起来像

titlesubtitle

而不是

title\nsubtitle

.Jumbotron{
高度：300px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}

标题
字幕

您可以引入一个新的非柔性父元素来包装这些元素，这样父元素将是居中的柔性子元素，它的子元素将只是普通的非柔性子元素

.Jumbotron{
高度：300px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}

标题
字幕

您可以引入一个新的非柔性父元素来包装这些元素，这样父元素将是居中的柔性子元素，它的子元素将只是普通的非柔性子元素

.Jumbotron{
高度：300px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}

标题
字幕

好的，由于

flexbox

treat block and inline元素，因此该方法不适用于现有标记。由于

flexbox

treat block and inline元素，因此该方法不适用于现有标记。如果2跨越flex父元素的直接子元素，则该方法不正确，它们将表现为一个块（每个在自己的行上），它们不会移动第一个示例，因为如果2跨越flex父级的直接子级，则这是错误的，它们将表现为一个块（每个在自己的行上），而它们不是