在作为引导行子容器的 flexbox 中居中文本答案

【问题标题】：Center text in flexbox that are subcontainer of bootstrap row在作为引导行子容器的 flexbox 中居中文本
【发布时间】：2018-08-10 02:37:59
【问题描述】：

我想知道是否有人可以在不更改动态页面高度计算的情况下帮助将文本集中在正文中的页面上。

这里是页面： https://protasov.by/contacts/

这里是玉/哈巴狗代码

 section.container-fluid
            .row(style="padding-top:20px;").centered-form.center-block
                section.container(style="display: flex; align-items: center; justify-content: center;").col-md-10.text-center
                    .wb-stl-normal(style="margin: auto; align-self: center;")
                        p
                            em TEXT
                            |  TEXT TEXT
                            br
                            span.wb-stl-small TEXT TEXT
                        br

我尝试了不同的方法，但无法获得任何可见的结果来帮助我将文本置于“section.container-fluid”块的中间，以便它在页面画布中完美对齐 H/V。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

标签： html css twitter-bootstrap flexbox text-alignment

【解决方案1】：

您可以使用引导弹性盒类

水平对齐使用

.d-flex .align-content-{x} 其中“x”可以是center、around 或between

垂直对齐使用

.d-flex .align-items-{x} 其中“x”可以是center、stretch 或baseline

对 bootstrap flex-box 类的引用 here

您可以了解更多关于 css flex-box here

【讨论】：

在上面的代码示例中，它显示了 align-items-center 和 justify-content-center 类。可以通过m-auto 解决，但提供的代码不完整很难判断。
他想水平居中还是垂直居中？
不确定，真的不清楚。我会通过那个标记来猜测两者，但我不能确定......
希望在正文布局中垂直和水平居中
我试着做：section.container-fluid d-flex.flex-row.justify-content-center.align-items-center .flex-column(style="padding-top:20px ;").justify-content-stretch.wb-stl-normal.text-center p TEXT 但无论如何它位于容器流体的顶部

【解决方案2】：

我在 wb_main 中添加了百分比高度，设置为最小值。然后添加了 d flex 和 h 100 个类，现在垂直对齐效果很好。

【讨论】：